首先引入俩个插件
npm i html2canvas --save
npm i jspdf --save
其次在页面中(js代码)
import html2canvas from 'html2canvas'
import jspdf from 'jspdf'
downloadPdf () {
let target = this.$refs.pdf
console.log('target:',target);
html2canvas(target, {
useCORS: true, // 当图片是链接地址时,需加该属性,否组无法显示图片
"imageTimeout": 0,
'scale': 2,
"width": target.offsetWidth,
"height": target.offsetHeight,
})
.then(canvas => {
let contentWidth = canvas.width; // 592px
let contentHeight = canvas.height; // 841px
//一页pdf显示html页面生成的canvas高度;
let pageHeight = contentWidth / 592 * 841;
//未生成pdf的html页面高度
let leftHeight = contentHeight;
//页面偏移
// let offsetX = 100;
// let offsetY = 100;
let offsetX = 0;
let offsetY = 0;
//a4纸的尺寸[595.28,841.89],html页面生成的canvas在pdf中图片的宽高
let imgWidth = 592;
//let imgWidth = 592 - 2 * offsetX;//边框留白
let imgHeight = imgWidth / contentWidth * contentHeight;
let pageData = canvas.toDataURL('image/jpeg', 1.0);
// 第一个方向,第二个单位,第三个尺寸格式
// landscape横向
// let pdf = new jspdf('landscape', 'pt', 'a4');
let pdf = new jspdf('', 'pt', 'a4');
//有两个高度需区分,一个是html页面的实际高度,和生成pdf的页面高度(841.89)
//当内容未超过pdf一页显示的范围,无需分页
if(leftHeight < pageHeight) {
pdf.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight)
} else {
while(leftHeight > 0) {
pdf.addImage(pageData, 'JPEG', offsetX, offsetY, imgWidth, imgHeight)
leftHeight -= pageHeight;
offsetX -= 592;
offsetY -= 841;
//避免添加空白页
if(leftHeight > 0) {
pdf.addPage();
}
}
}
let name = '二维码打印.pdf'; // 定义生成的pdf的文件名字
pdf.save(name);
});
h5代码
<el-button type="primary" @click="downloadPdf">下 载</el-button>
此功能是在开发过程中遇到,参考了两篇文章:
【Vue2】vue指定页面div保存为pdf、vue指定页面内容转为文件流上传到后端、js指定div页面转为pdf文件_js将指定div生成pdf-CSDN博客
vue指定div导出pdf(好文章,有注释!)_vue 将div内容 生产 pdf 文件流-CSDN博客
功能持续更新中,还有一些问题在研究。。