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

刺骨的言语ヽ痛彻心扉 2022-08-31 14:28 652阅读 0赞

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70]  
如果使用：`window.print()`实现打印，我们可以通过在浏览器控制台测试一下效果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 1]  
效果如下所示：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 2]  
这种情况`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`的页面时间  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 3]  
    第一个`id`就是页面中，需要导出部分的`id`;  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 4]  
    第二个参数和第三个参数就是导出的`pdf`的标题部分组成：  
    ![在这里插入图片描述][5be2899799844eb893fde92a58a48ec5.png]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70]: /images/20220829/e2bc26349f63447fb0499bfd98f151b2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 1]: /images/20220829/2c707f59b47545499f6f5c3ccf8f1f88.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 2]: /images/20220829/afb25acb98034839b659e3d4a866f229.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 3]: /images/20220829/1a710e23c83140e9b72fdc34a5b2fd43.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 4]: /images/20220829/89bd35214865423eb86415a3fcbb1bac.png
[5be2899799844eb893fde92a58a48ec5.png]: /images/20220829/09f4e431a54c44459c5eca4a872a0273.png