前端实现——html2pdf功能(完成)

大家好，欢迎来到IT知识分享网。

电商项目中，经常会遇到导出为PDF的功能，最最简单的方式就是：window.print()，可以自动展示出当前页面的打印预览效果。

如果使用：window.print()实现打印，我们可以通过在浏览器控制台测试一下效果：

这种情况window.print()适用于全屏页面的，而非弹窗的形式，如果要只打印弹窗部分，则需要用其他的方式：

html2pdf实现导出html页面为pdf

1.npm install html2canvas jspdf --save——安装插件到package.json文件中的dependencies里

将html2canvas和jspdf安装到package.json文件中的dependencies中，方便其他人通过npm install可以下载到本地的node_modules中

2.在utlis文件夹中添加html2pdf.js文件，内容如下：

// 导出页面为PDF格式 import html2canvas from "html2canvas"; import JSPDF from "jspdf"; /* * elementName: 需要输出PDF的页面id * htmlTitle: 页面标题 * currentTime：创建时间 */ export default function(elementName, htmlTitle, currentTime) { 
    var element = document.getElementById(elementName) html2canvas(element, { 
    logging: false }).then(function(canvas) { 
    var pdf = new JSPDF("p", "mm", "a4") // A4纸，纵向 var ctx = canvas.getContext("2d") var a4w = 190; var a4h = 257 // A4大小，210mm x 297mm，四边各保留20mm的边距 var imgHeight = Math.floor(a4h * canvas.width / a4w) // 按A4显示比例换算一页图像的像素高度 var renderedHeight = 0 while (renderedHeight < canvas.height) { 
    var page = document.createElement("canvas") page.width = canvas.width page.height = Math.min(imgHeight, canvas.height - renderedHeight) // 可能内容不足一页 // 用getImageData剪裁指定区域，并画到前面创建的canvas对象中 page.getContext("2d").putImageData(ctx.getImageData(0, renderedHeight, canvas.width, Math.min(imgHeight, canvas.height - renderedHeight)), 0, 0) pdf.addImage(page.toDataURL("image/jpeg", 1.0), "JPEG", 10, 10, a4w, Math.min(a4h, a4w * page.height / page.width)) // 添加图像到页面，保留10mm边距 renderedHeight += imgHeight if (renderedHeight < canvas.height) { 
    pdf.addPage() } // 如果后面还有内容，添加一个空页 // delete page; } pdf.save(htmlTitle + currentTime) }) } 

3.在需要的页面使用：

import ExportSavePdf from "@/utils/html2pdf"; export default{ 
    ... //保存文件 ExportSavePdf("pdfcontent", "对账单",timeFormat(new Date(), "YYYY-mm-dd")); } 

分析一下上面的三个参数：

1. elementName:需要输出PDF的页面的id
2. htmlTitle:导出的PDF的页面标题
3. currentTime:导出的PDF的页面时间
   
   第一个id就是页面中，需要导出部分的id;
   
   第二个参数和第三个参数就是导出的pdf的标题部分组成：