devbox
知新_RL
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

uniapp实现将页面转换成pdf（小程序、app、h5）_微信小程序页面转pdf

作者：知新_RL | 2024-02-26 02:53:50

赞

踩

微信小程序页面转pdf

使用html2Canvas和jspdf

安装这两个

npm i jspdf html2canvas

uniapp在小程序无法获取dom，app端可在renderjs中获取 dom，小程序需要使用web-view导入一个h5页面，实现转pdf

H5和小程序
  1. <template>
  2.     <div>
  3.         <div id="content">
  4.             要转换的内容
  5.         </div>
  6.         <button type="button" class="btn btn-primary" @click="getPdf()">导出PDF</button>
  7.     </div>
  8. </template>
  9.  
  10. <script>
  11. 	import html2Canvas from 'html2canvas'
  12. 	import { jsPDF } from 'jspdf'
  13. 	let BaseUrl = 'url'    //域名
  14. 	export default{
  15. 		methods:{
  16. 			getPdf(){
  17. 				let that = this
  18. 				var shareContent = document.getElementById('content');
  19. 				var width = shareContent.offsetWidth / 4;
  20. 				var height = shareContent.offsetHeight / 4;
  21. 				html2Canvas(shareContent , {
  22. 					dpi: 900,
  23. 					scrolly: 0,
  24. 					// width:eleW,//生成后的宽度
  25. 					// height:eleH,//生成后的高度
  26. 					scrollx: -10,
  27. 					useCORS: true, //允许canvas画布内可以跨域请求外部链接图片, 允许跨域请求。
  28. 	
  29. 					// backgroundColor: null //避免图片有白色边框
  30. 				}).then((canvas) => {
  31. 					var context = canvas.getContext('2d');
  32. 					context.mozImageSmoothingEnabled = false;
  33. 					context.webkitImageSmoothingEnabled = false;
  34. 					context.msImageSmoothingEnabled = false;
  35. 					context.imageSmoothingEnabled = false;
  36. 					var pageData = canvas.toDataURL('image/jpeg', 1.0);
  37. 					var img = new Image();
  38. 					img.src = pageData;
  39. 					img.onload = () => {
  40. 						// 获取dom高度、宽度
  41. 						img.width = img.width / 2;
  42. 						img.height = img.height / 2;
  43. 						console.log(img.width, '------ img.width');
  44. 						console.log(img.height, '------img.height');
  45. 						img.style.transform = 'scale(0.5)';
  46. 						if (width > height) {
  47. 							// 此可以根据打印的大小进行自动调节
  48. 							// eslint-disable-next-line
  49. 							var pdf = new jsPDF('l', 'mm', [width * 0.505, height * 0.545]);
  50. 						} else {
  51. 							// eslint-disable-next-line
  52. 							var pdf = new jsPDF('p', 'mm', [width * 0.505, height * 0.545]);
  53. 						}
  54. 						pdf.addImage(pageData, 'jpeg', 0, 0, width * 0.505, height * 0.545);
  55. 						pdf.save('安全服务协议' + '.pdf');  //h5在这就可以保存pdf
  56.  
  57.                         //内嵌到微信小程序
  58. 						var blob = pdf.output("datauristring");
  59. 						console.log(wx,'wx')
  60. 						wx.miniProgram.getEnv(function (res) {
  61. 							console.log("当前环境：" + JSON.stringify(res));
  62. 						});
  63. 						wx.miniProgram.postMessage({
  64. 							data: {
  65. 								imageData:blob
  66. 							},
  67. 						});
  68. 						wx.miniProgram.navigateBack()
  69. 					};
  70. 				}).catch((r) => {
  71. 					console.log(r);
  72. 				})
  73. 			},
  74. 			
  75. 		},
  76. 		onLoad(e) {
  77. 			this.id = e.id 
  78. 		}
  79. 	}
  80. 	
  81. </script>

其中通过web-view导入到微信小程序的话，需要导入微信的sdk

在index.html中导入也不知道咋回事，有wx，但是wx.miniProgram是undefined

<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>

然后网上找到大佬的方法

在App.vue里面写

  1. onLaunch: function() {
  2. 	console.log('App Launch')
  3. 	// #ifdef H5
  4. 	var script = document.createElement('script');
  5. 	script.src = "https://res.wx.qq.com/open/js/jweixin-1.4.0.js";
  6. 	script.type = 'text/javascript';
  7. 	document.body.appendChild(script);
  8. 	// #endif		
  9. },

然后在小程序中使用web-view导入这个h5

  1. <template>
  2. 	<view class="">
  3. 		<web-view :src="url" @message="message"></web-view>
  4. 	</view>
  5. </template>
  6.  
  7. <script>
  8. 	export default{
  9. 		data(){
  10. 			return{
  11. 				imageData:'',
  12. 				id:'',
  13. 				url:''
  14. 			}
  15. 		},
  16. 		methods:{
  17. 			message(e){
  18. 				console.log(e,'e')
  19. 				this.imageData = e.detail.data[0].imageData
  20. 				let path = this.imageData.split('base64,')[1]
  21. 				this.download(path)
  22. 			},
  23. 			async download(url) {
  24. 				let result = url.replace(/[\r\n]/g, '');
  25. 				var fs = wx.getFileSystemManager();
  26. 				let fileName = '';
  27. 				var times = new Date().getTime();
  28. 				url = wx.base64ToArrayBuffer(result);
  29. 				// console.log(url,'图片临时路径')
  30. 				const filePath = wx.env.USER_DATA_PATH + '/' + Date.now() + '.pdf'
  31. 				fs.writeFile({
  32. 				    filePath,
  33. 				    data: url,  // 将 base64 转为 arrayuffer
  34. 				    success (res) {
  35. 				      uni.openDocument({
  36. 				        showMenu: true,
  37. 				        fileType: 'pdf',
  38. 				        filePath,
  39. 				        success: function (res) {
  40. 				          console.log('打开文档成功')
  41. 				        }
  42. 				      })
  43. 				    },
  44. 				    fail (err) {
  45. 				      console.log('错误', err)
  46. 				    }
  47. 				  })
  48. 			},
  49. 		},
  50. 		onLoad(e) {
  51. 			this.id = e.id || 0
  52. 			this.url = this.$http.BaseUrl+`/h5/#/?id=${this.id}`
  53. 			console.log(this.url,'url')
  54. 		}
  55. 	}
  56. </script>
App端

也可以使用web-view，但我直接在renderjs中写了

  1. <template>
  2.     <div>
  3.         <div id="content">
  4.             要转换的内容
  5.         </div>
  6.         <button type="button" class="btn btn-primary" @click="canvasImage.save">导出PDF</button>
  7.     </div>
  8. </template>
  9.  
  10. <script>
  11. import { base64ToPath } from '../../../common/imageTools.js';
  12. export default{
  13.  
  14.     methods:{
  15.         receiveRenderData(url){
  16. 			this.loadBase64Url(url)
  17. 		},
  18. 		/* 将base64 位的图片路径转换为 临时路径 */
  19. 		loadBase64Url(url) {
  20. 			const imageStr = url;
  21. 			base64ToPath(imageStr)
  22. 			.then(path => {
  23. 					console.log(path,'path')
  24. 					this.saveImage(path);  
  25. 			})
  26. 			.catch(error => {
  27. 				 console.error('临时路径转换出错了：', error);
  28. 			});
  29. 		},
  30. 			saveImage(url){
  31. 				uni.saveFile({
  32. 					tempFilePath:url,
  33. 					async success(res) {
  34. 						uni.openDocument({
  35. 							filePath:res.savedFilePath,
  36. 							success: function(FileRes) {
  37. 								console.log('打开成功');
  38. 							}
  39. 						}); 
  40. 					},
  41. 					complete(res) {
  42. 						console.log(res,'res')
  43. 					}
  44. 				})
  45. 			},
  46.     }
  47. }
  48. </script>
  49.  
  50. <script lang="renderjs" module="canvasImage">
  51. import html2Canvas from 'html2canvas'
  52. import { jsPDF } from 'jspdf'
  53. export default {
  54.   methods: {
  55.     // 生成图片需要调用的方法
  56.     generateImage(e, ownerFun) {
  57. 		return new Promise((resolve, reject) => {
  58. 			var shareContent = document.getElementById('content');
  59. 			var width = shareContent.offsetWidth / 4;
  60. 			var height = shareContent.offsetHeight / 4;
  61. 			html2Canvas(document.getElementById('content'), {
  62. 				dpi: 900,
  63. 				scrolly: 0,
  64. 				// width:eleW,//生成后的宽度
  65. 				// height:eleH,//生成后的高度
  66. 				scrollx: -10,
  67. 				useCORS: true, //允许canvas画布内可以跨域请求外部链接图片, 允许跨域请求。
  68. 				
  69. 				// backgroundColor: null //避免图片有白色边框
  70. 			}).then((canvas) => {
  71. 				setTimeout(()=> {
  72. 					var context = canvas.getContext('2d');
  73. 					context.mozImageSmoothingEnabled = false;
  74. 					context.webkitImageSmoothingEnabled = false;
  75. 					context.msImageSmoothingEnabled = false;
  76. 					context.imageSmoothingEnabled = false;
  77. 					var pageData = canvas.toDataURL('image/jpeg', 1.0);
  78. 					// resolve(pageData)
  79. 					var img = new Image();
  80. 					img.src = pageData
  81. 					img.onload = () => {
  82. 						// 获取dom高度、宽度
  83. 						img.width = img.width / 2;
  84. 						img.height = img.height / 2;
  85. 						// console.log(img.width, '------ img.width');
  86. 						// console.log(img.height, '------img.height');
  87. 						img.style.transform = 'scale(0.5)';
  88. 						if (width > height) {
  89. 							// 此可以根据打印的大小进行自动调节
  90. 							// eslint-disable-next-line
  91. 							var pdf = new jsPDF('l', 'mm', [width * 0.505, height * 0.545]);
  92. 						} else {
  93. 							// eslint-disable-next-line
  94. 							var pdf = new jsPDF('p', 'mm', [width * 0.505, height * 0.545]);
  95. 						}
  96. 						pdf.addImage(pageData, 'jpeg', 0, 0, width * 0.505, height * 0.545);
  97. 						var url = pdf.output("datauristring");
  98. 						resolve(url)
  99. 					};
  100. 				}, 500);
  101. 				
  102. 			}).catch((r) => {
  103. 				console.log(r);
  104. 			})
  105. 		})
  106.     },
  107. 	async save(e,ownerFun){
  108. 		let img =  await this.generateImage().then()
  109. 		ownerFun.callMethod('receiveRenderData',img)
  110. 	},
  111.   },
  112. }
  113. </script>

然后发现在ios中pdf中的网络路径的图片不显示，用过其他方法，太笨还是不行，只能转base64

  1. urlTobase64(url){
  2. 	return new Promise((resolve,reject)=>{
  3. 			uni.request({
  4. 				url: url,
  5. 				method:'GET',
  6. 				responseType:'arraybuffer',
  7. 				success: res => {
  8. 					let base64 = wx.arrayBufferToBase64(res.data); //把arraybuffer转成base64 
  9. 					base64 = ('data:image/jpg;base64,' + base64).replace(/[\r\n]/g, "")
  10. 					resolve(base64)
  11. 			    },fail: (e) => {
  12. 				    resolve(url)
  13. 				    console.log("图片转换失败");
  14. 		        }
  15. 		    })
  16. 	})
  17. },

资源绑定那个js下载居然还要vip -_-，imageTool.js如下

  1. function getLocalFilePath(path) {
  2.     if (path.indexOf('_www') === 0 || path.indexOf('_doc') === 0 || path.indexOf('_documents') === 0 || path.indexOf('_downloads') === 0) {
  3.         return path
  4.     }
  5.     if (path.indexOf('file://') === 0) {
  6.         return path
  7.     }
  8.     if (path.indexOf('/storage/emulated/0/') === 0) {
  9.         return path
  10.     }
  11.     if (path.indexOf('/') === 0) {
  12.         var localFilePath = plus.io.convertAbsoluteFileSystem(path)
  13.         if (localFilePath !== path) {
  14.             return localFilePath
  15.         } else {
  16.             path = path.substr(1)
  17.         }
  18.     }
  19.     return '_www/' + path
  20. }
  21.  
  22. function dataUrlToBase64(str) {
  23.     var array = str.split(',')
  24.     return array[array.length - 1]
  25. }
  26.  
  27. var index = 0
  28. function getNewFileId() {
  29.     return Date.now() + String(index++)
  30. }
  31.  
  32. function biggerThan(v1, v2) {
  33.     var v1Array = v1.split('.')
  34.     var v2Array = v2.split('.')
  35.     var update = false
  36.     for (var index = 0; index < v2Array.length; index++) {
  37.         var diff = v1Array[index] - v2Array[index]
  38.         if (diff !== 0) {
  39.             update = diff > 0
  40.             break
  41.         }
  42.     }
  43.     return update
  44. }
  45.  
  46. export function pathToBase64(path) {
  47.     return new Promise(function(resolve, reject) {
  48.         if (typeof window === 'object' && 'document' in window) {
  49.             if (typeof FileReader === 'function') {
  50.                 var xhr = new XMLHttpRequest()
  51.                 xhr.open('GET', path, true)
  52.                 xhr.responseType = 'blob'
  53.                 xhr.onload = function() {
  54.                     if (this.status === 200) {
  55.                         let fileReader = new FileReader()
  56.                         fileReader.onload = function(e) {
  57.                             resolve(e.target.result)
  58.                         }
  59.                         fileReader.onerror = reject
  60.                         fileReader.readAsDataURL(this.response)
  61.                     }
  62.                 }
  63.                 xhr.onerror = reject
  64.                 xhr.send()
  65.                 return
  66.             }
  67.             var canvas = document.createElement('canvas')
  68.             var c2x = canvas.getContext('2d')
  69.             var img = new Image
  70.             img.onload = function() {
  71.                 canvas.width = img.width
  72.                 canvas.height = img.height
  73.                 c2x.drawImage(img, 0, 0)
  74.                 resolve(canvas.toDataURL())
  75.                 canvas.height = canvas.width = 0
  76.             }
  77.             img.onerror = reject
  78.             img.src = path
  79.             return
  80.         }
  81.         if (typeof plus === 'object') {
  82.             plus.io.resolveLocalFileSystemURL(getLocalFilePath(path), function(entry) {
  83.                 entry.file(function(file) {
  84.                     var fileReader = new plus.io.FileReader()
  85.                     fileReader.onload = function(data) {
  86.                         resolve(data.target.result)
  87.                     }
  88.                     fileReader.onerror = function(error) {
  89.                         reject(error)
  90.                     }
  91.                     fileReader.readAsDataURL(file)
  92.                 }, function(error) {
  93.                     reject(error)
  94.                 })
  95.             }, function(error) {
  96.                 reject(error)
  97.             })
  98.             return
  99.         }
  100.         if (typeof wx === 'object' && wx.canIUse('getFileSystemManager')) {
  101.             wx.getFileSystemManager().readFile({
  102.                 filePath: path,
  103.                 encoding: 'base64',
  104.                 success: function(res) {
  105.                     resolve('data:image/png;base64,' + res.data)
  106.                 },
  107.                 fail: function(error) {
  108.                     reject(error)
  109.                 }
  110.             })
  111.             return
  112.         }
  113.         reject(new Error('not support'))
  114.     })
  115. }
  116.  
  117. export function base64ToPath(base64) {
  118.     return new Promise(function(resolve, reject) {
  119.         if (typeof window === 'object' && 'document' in window) {
  120.             base64 = base64.split(',')
  121.             var type = base64[0].match(/:(.*?);/)[1]
  122.             var str = atob(base64[1])
  123.             var n = str.length
  124.             var array = new Uint8Array(n)
  125.             while (n--) {
  126.                 array[n] = str.charCodeAt(n)
  127.             }
  128.             return resolve((window.URL || window.webkitURL).createObjectURL(new Blob([array], { type: type })))
  129.         }
  130.         var extName = base64.split(',')[0].match(/data\:\S+\/(\S+);/)
  131.         if (extName) {
  132.             extName = extName[1]
  133.         } else {
  134.             reject(new Error('base64 error'))
  135.         }
  136.         var fileName = getNewFileId() + '.' + extName
  137.         if (typeof plus === 'object') {
  138.             var basePath = '_doc'
  139.             var dirPath = 'uniapp_temp'
  140.             var filePath = basePath + '/' + dirPath + '/' + fileName
  141.             if (!biggerThan(plus.os.name === 'Android' ? '1.9.9.80627' : '1.9.9.80472', plus.runtime.innerVersion)) {
  142.                 plus.io.resolveLocalFileSystemURL(basePath, function(entry) {
  143.                     entry.getDirectory(dirPath, {
  144.                         create: true,
  145.                         exclusive: false,
  146.                     }, function(entry) {
  147.                         entry.getFile(fileName, {
  148.                             create: true,
  149.                             exclusive: false,
  150.                         }, function(entry) {
  151.                             entry.createWriter(function(writer) {
  152.                                 writer.onwrite = function() {
  153.                                     resolve(filePath)
  154.                                 }
  155.                                 writer.onerror = reject
  156.                                 writer.seek(0)
  157.                                 writer.writeAsBinary(dataUrlToBase64(base64))
  158.                             }, reject)
  159.                         }, reject)
  160.                     }, reject)
  161.                 }, reject)
  162.                 return
  163.             }
  164.             var bitmap = new plus.nativeObj.Bitmap(fileName)
  165.             bitmap.loadBase64Data(base64, function() {
  166.                 bitmap.save(filePath, {}, function() {
  167.                     bitmap.clear()
  168.                     resolve(filePath)
  169.                 }, function(error) {
  170.                     bitmap.clear()
  171.                     reject(error)
  172.                 })
  173.             }, function(error) {
  174.                 bitmap.clear()
  175.                 reject(error)
  176.             })
  177.             return
  178.         }
  179.         if (typeof wx === 'object' && wx.canIUse('getFileSystemManager')) {
  180.             var filePath = wx.env.USER_DATA_PATH + '/' + fileName
  181.             wx.getFileSystemManager().writeFile({
  182.                 filePath: filePath,
  183.                 data: dataUrlToBase64(base64),
  184.                 encoding: 'base64',
  185.                 success: function() {
  186.                     resolve(filePath)
  187.                 },
  188.                 fail: function(error) {
  189.                     reject(error)
  190.                 }
  191.             })
  192.             return
  193.         }
  194.         reject(new Error('not support'))
  195.     })
  196. }

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/知新_RL/article/detail/143445
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号