本文介绍在uni-app框架下，利用微信小程序的webview组件加载H5页面，并通过html2canvas与jspdf插件将网页内容转换为PDF文件的方法。文章详细说明了插件安装、App.vue配置以及H5页面内的具体实现代码，涵盖从页面加载到文件保存的完整流程。
在正式上线前，务必前往小程序管理后台完成业务域名的配置，这是使用webview组件的前提条件。
在uni-app项目中集成webview组件，用于承载外部H5页面内容。
<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页面端的开发，需要实现具体的PDF生成逻辑。
首先需要安装两个必要的JavaScript库：jspdf和html2canvas。
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>
在uni-app的App.vue文件中添加特定代码，以处理H5页面与小程序之间的通信及文件下载逻辑。
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
},总结
本文介绍了微信小程序利用webview将H5页面转换为PDF文件的具体实现方法，更多相关技术细节可参考本站其他文章。