Vue前端HTML另存为PDF的两种常用方法《干货分享》

Vue前端HTML另存为PDF常用的两种方法。使用html2Canvas和JsPDF库在转换为图像后保存PDF。调用浏览器window.print()，然后手动保存为PDF。第一个优点是没有预览，点一下就可以保存。您无需手动配置和保存。您可以选择部分Dom进行保存。缺点是不清楚。它需要先转换成图像。没有提前预览。不适合保存过长的分页内容。依赖html2Canvas和JsPDF库。第二个好处是可以提前。预览适合保存过长的分页内容，更适合直接通过浏览器API保存，内容清晰，开发方便快捷。缺点第一次需要在预览框中手动配置参数，需要手动点击保存。会出现打印预览弹窗不能选择部分Dome，只能保存当前整页。第一种方法：使用html2Canvas和JsPDF库，转图片保存PDF。安装html2canvas库npminstallhtml2canvas安装jspdf库npminstalljspdf写保存函数文件位置：src/utils/htmlToPdf.js/**路径：src/utils/htmlToPdf.js名称：导出页面为PDF格式**/从'html2canvas'导入html2Canvas从'jspdf'导入JsPDFconsthtmlToPdf={getPdf(title){html2Canvas(document.querySelector('#pdfDom'),{allowTaint:true,}).then(canvas=>{let//contentwidth的宽度=canvas.width;//letcontentheight=canvas.height;//一一pdfpdfpdfhtmlhtmlcanvas高度*841.89;//未生成html页面的高度pdfletleftHeight=contentHeight;//页面偏移量letposition=0;//a4纸的大小[595.28,841.89]，html生成的canvas的pdf中图片的宽高pageidth=imgW595.28;letimgHeight=592.28/contentWidth*contentHeight;//画布到图像数据letpageData=画布.toDataURL('图像/jpeg',1.0);//创建一个新的JsPDF对象letPDF=newJsPDF('','pt','a4');//判断是否翻页if(leftHeight0){PDF.addImage(pageData,'JPEG',0,位置,imgWidth,imgHeight);leftHeight-=pageHeight;位置-=841.89;if(leftheight>0){pdf.addpage()}}//保存pdf.save(title+'.pdf')}}};导出默认htmltopdf；复制代码使用函数sRC/views/PdfPage1.vue复制代码二：调用浏览器Window.print()，然后手动保存为PDF代码位置：src/views/PdfPage2.vueedsMoreBaiduCSSprintstyles*/@mediaprint{.no-print{display:none;}}/printpageconfiguration/@page{margin:60px10px;}复制代码