uniapp APP端页面转为PDF

点击事件   @click="canvasImage.save"

//安装依赖
npm install --save html2canvas

npm install jspdf --save

<script lang="renderjs" module="canvasImage">
import html2Canvas from 'html2canvas'
import { jsPDF } from 'jspdf'
export default {
  methods: {
    // 生成图片需要调用的方法
    generateImage(e, ownerFun) {
		return new Promise((resolve, reject) => {
			var shareContent = document.getElementById('detail');
			var width = shareContent.offsetWidth / 4;
			var height = shareContent.offsetHeight / 4;
			html2Canvas(document.getElementById('detail'), {
				dpi: 900,
				scrolly: 0,
				// width:eleW,//生成后的宽度
				// height:eleH,//生成后的高度
				scrollx: -10,
				useCORS: true, //允许canvas画布内可以跨域请求外部链接图片, 允许跨域请求。
				
				// backgroundColor: null //避免图片有白色边框
			}).then((canvas) => {
				setTimeout(()=> {
					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);
					// resolve(pageData)
					var img = new Image();
					img.src = pageData
					img.onload = () => {
						// 获取dom高度、宽度
						img.width = img.width / 2;
						img.height = img.height / 2;
						// console.log(img.width, '------ img.width');
						// console.log(img.height, '------img.height');
						img.style.transform = 'scale(0.5)';
						if (width > height) {
							// 此可以根据打印的大小进行自动调节
							// eslint-disable-next-line
							var pdf = new jsPDF('l', 'mm', [width * 0.505, height * 0.545]);
						} else {
							// eslint-disable-next-line
							var pdf = new jsPDF('p', 'mm', [width * 0.505, height * 0.545]);
						}
						pdf.addImage(pageData, 'jpeg', 0, 0, width * 0.505, height * 0.545);
						var url = pdf.output("datauristring");
						resolve(url)
					};
				}, 500);
				
			}).catch((r) => {
				console.log(r);
			})
		})
    },
	async save(e,ownerFun){
		let img =  await this.generateImage().then()
		ownerFun.callMethod('receiveRenderData',img)
	},
  },
}
</script>

<script>

    import {
		pathToBase64,
		base64ToPath
	} from '@/js_sdk/mmmm-image-tools/index.js'
            receiveRenderData(url){
				this.loadBase64Url(url)
			},
			/* 将base64 位的图片路径转换为 临时路径 */
			loadBase64Url(url) {
				const imageStr = url;
				var that = this
				base64ToPath(imageStr)
				.then(path => {
					console.log(path,'path')
					this.saveImage(path);  
				})
				.catch(error => {
					 console.error('临时路径转换出错了：', error);
				});
			},
			saveImage(url){
				uni.saveFile({
					tempFilePath:url,
					async success(res) {
						console.log(res.savedFilePath, 'res.savedFilePath')
						uni.openDocument({
							filePath:res.savedFilePath,
							success: function(FileRes) {
								console.log('打开成功');
							}
						}); 
					},
					complete(res) {
						console.log(res,'res')
					}
				})
			},

</script>