vuepdf转换html,Vue前端HTML保存为PDF的两种常用方式 「干货分享」

Vue前端HTML保存为PDF常用方式有两种。使用html2Canvas和JsPDF库，转化为图片后保存PDF。

调用浏览器window.print()，然后手动保存为PDF。

第一种

优点没有预览点击即可保存

不需要手动配置保存

可选取部分Dom保存

缺点较不清晰

需要先转化为图片

没有提前预览

不适合保存过长分页内容

依赖html2Canvas和JsPDF库

第二种

优点可以提前预览

适合保存过长分页内容比较合适

直接由浏览器API保存，内容清晰

开发便利快速。

缺点第一次需要在预览框手动配置参数

需要手动点击保存

会有Print预览弹窗

不可选取部分Dome，只能保存当前整页面。

第一种:使用html2Canvas和JsPDF库，转化为图片后保存PDF。安装html2canvas库 npm install html2canvas

安装jspdf库 npm install jspdf

编写保存函数 文件位置：src/utils/htmlToPdf.js/**

path: src/utils/htmlToPdf.js

name: 导出页面为PDF格式

**/import html2Canvas from 'html2canvas'import JsPDF from 'jspdf'const htmlToPdf = {    getPdf(title) {

html2Canvas(document.querySelector('#pdfDom'), {            allowTaint: true,

}).then(canvas=>{            //内容的宽度

let contentWidth = canvas.width;            //内容高度

let contentHeight = canvas.height;            //一页pdf显示html页面生成的canvas高度,a4纸的尺寸[595.28,841.89];

let pageHeight = contentWidth / 592.28 * 841.89;            //未生成pdf的html页面高度

let leftHeight = contentHeight;            //页面偏移

let position = 0;            //a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高

let imgWidth = 595.28;            let imgHeight = 592.28 / contentWidth * contentHeight;            //canvas转图片数据

let pageData = canvas.toDataURL('image/jpeg', 1.0);            //新建JsPDF对象

let PDF = new JsPDF('', 'pt', 'a4');            //判断是否分页

if (leftHeight 

PDF.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight)

} else {                while (leftHeight > 0) {

PDF.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight);

leftHeight -= pageHeight;

position -= 841.89;                    if (leftHeight > 0) {

PDF.addPage()

}

}

}            //保存文件

PDF.save(title + '.pdf')

})

}

};export default htmlToPdf;复制代码使用函数，文件位置src/views/PdfPage1.vue

导出PDF

            

Welcome to Your Vue.js App

{{item}}Welcome to Your Vue.js App

复制代码

第二种:调用浏览器window.print()，然后手动保存为PDF。代码位置：src/views/PdfPage2.vue

导出PDF

            

Welcome to Your Vue.js App

{{item}}Welcome to Your Vue.js App

复制代码

作者：天小天

打开App，阅读手记