快捷導(dǎo)航

微信小程序使用webview頁(yè)面轉(zhuǎn)pdf文件代碼示例

更新時(shí)間：2024年09月04日 09:50:56 作者：大聰明了

工作需求,將webview的內(nèi)容導(dǎo)出到pdf輸出,下面這篇文章主要給大家介紹了關(guān)于微信小程序使用webview頁(yè)面轉(zhuǎn)pdf文件的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下

前言：正式上線，在小程序后臺(tái)配置業(yè)務(wù)域名

一、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,'圖片臨時(shí)路徑')
				const filePath = wx.env.USER_DATA_PATH + '/' + Date.now() + '.pdf'
				fs.writeFile({
					filePath,
					data: url, // 將 base64 轉(zhuǎn)為 arrayuffer
					success(res) {
						uni.openDocument({
							showMenu: true,
							fileType: 'pdf',
							filePath,
							success: function(res) {
								console.log('打開文檔成功')
							}
						})
					},
					fail(err) {
						console.log('錯(cuò)誤', err)
					}
				})
			}
		}
	}
</script>

二、H5頁(yè)面

(1) 安裝兩個(gè)插件

npm i jspdf html2canvas

<template>
	<view id="content">這是轉(zhuǎn)pdf的內(nèi)容</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傳來(lái)的鏈接參數(shù)
			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畫布內(nèi)可以跨域請(qǐng)求外部鏈接圖片, 允許跨域請(qǐng)求。

					// 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) {
							// 此可以根據(jù)打印的大小進(jìn)行自動(dòng)調(diào)節(jié)
							// 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

						//內(nèi)嵌到微信小程序
						var blob = pdf.output("datauristring");
						console.log(wx, 'wx')
						wx.miniProgram.getEnv(function(res) {
							console.log("當(dāng)前環(huán)境：" + 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	
},

總結(jié)

到此這篇關(guān)于微信小程序使用webview頁(yè)面轉(zhuǎn)pdf文件的文章就介紹到這了,更多相關(guān)微信小程序webview頁(yè)面轉(zhuǎn)pdf內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: