微信小程序使用webview页面转pdf

前言：正式上线，在小程序后台配置业务域名

一、uniapp 使用 webview

<template>
	<web-view :src="url" @message="message"></web-view>
</template>
<script>
	export default {
		data() {
			return {
				url: ''
			}
		},
		onLoad(option) {
			this.url = `http://www.xxx.com?orderId=${option.orderId}`;
		},
		methods: {
			message(e) {
				this.imageData = e.detail.data[0].imageData
				let path = this.imageData.split('base64,')[1]
				this.download(path)
			},
			async download(url) {
				let result = url.replace(/[\r\n]/g, '');
				var fs = wx.getFileSystemManager();
				let fileName = '';
				var times = new Date().getTime();
				url = wx.base64ToArrayBuffer(result);
				// console.log(url,'图片临时路径')
				const filePath = wx.env.USER_DATA_PATH + '/' + Date.now() + '.pdf'
				fs.writeFile({
					filePath,
					data: url, // 将 base64 转为 arrayuffer
					success(res) {
						uni.openDocument({
							showMenu: true,
							fileType: 'pdf',
							filePath,
							success: function(res) {
								console.log('打开文档成功')
							}
						})
					},
					fail(err) {
						console.log('错误', err)
					}
				})
			}
		}
	}
</script>

二、H5页面
(1) 安装两个插件

npm i jspdf html2canvas 

<template>
	<view id="content">这是转pdf的内容</view>
</template>

<script>
	import html2Canvas from 'html2canvas';
	import { jsPDF } from 'jspdf';
	export default {
		data() {
			return {
				orderId: ''
			}
		},
		onLoad(option) {
			this.orderId = this.getUrlParameter('orderId');
			uni.showLoading({
				title: '正在加载'
			})
			setTimeout(() => {
				uni.hideLoading();
				this.getPdf()
			}, 2000)
		},
		methods:{
			//接收uniapp传来的链接参数
			getUrlParameter(name) {
				name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
				var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
					results = regex.exec(location.search);
				return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
			},
			getPdf() {
				let that = this
				var shareContent = document.getElementById('content');
				var width = shareContent.offsetWidth / 1;
				var height = shareContent.offsetHeight / 1;
				html2Canvas(shareContent, {
					dpi: 900,
					scrolly: 0,
					// width:eleW,//生成后的宽度
					// height:eleH,//生成后的高度
					scrollx: -10,
					useCORS: true, //允许canvas画布内可以跨域请求外部链接图片, 允许跨域请求。

					// backgroundColor: null //避免图片有白色边框
				}).then((canvas) => {
					var context = canvas.getContext('2d');
					context.mozImageSmoothingEnabled = false;
					context.webkitImageSmoothingEnabled = false;
					context.msImageSmoothingEnabled = false;
					context.imageSmoothingEnabled = false;
					var pageData = canvas.toDataURL('image/jpeg', 1.0);
					var img = new Image();
					img.src = pageData;
					img.onload = () => {
						// 获取dom高度、宽度
						img.width = img.width / 2;
						img.height = img.height / 2;
						img.style.transform = 'scale(0.5)';
						if (width > height) {
							// 此可以根据打印的大小进行自动调节
							// eslint-disable-next-line
							var pdf = new jsPDF('l', 'mm', [width * 0.545, height * 0.545]);
						} else {
							// eslint-disable-next-line
							var pdf = new jsPDF('p', 'mm', [width * 0.545, height * 0.545]);
						}
						pdf.addImage(pageData, 'jpeg', 0, 0, width * 0.545, height * 0.545);
						pdf.save('这是文件命名' + '.pdf'); //h5在这就可以保存pdf

						//内嵌到微信小程序
						var blob = pdf.output("datauristring");
						console.log(wx, 'wx')
						wx.miniProgram.getEnv(function(res) {
							console.log("当前环境：" + JSON.stringify(res));
						});
						wx.miniProgram.postMessage({
							data: {
								imageData: blob
							},
						});
						wx.miniProgram.navigateBack()
					};
				}).catch((r) => {
					console.log(r);
				})
			}
		}
	}
</script>

(2) 在App.vue 添加以下代码

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