11-25 10:50 阅读 55

前端界面生成PDF并导出下载

最近，公司后台管理系统有个项目需求，将前端定义好的界面导出PDF文档。我查阅很多文档，发现可以使用html2canvas、jspdf来完成。也可以通过jspdf来绘画PDF文档

思路：通过 html2canvas 将 HTML 页面转换成图片，然后再通过 jspdf 将图片的 base64 生成为 pdf 文件

1、安装

npm install html2canvas --save 

npm install jspdf --save

2、html2Canvas

文档：http://html2canvas.hertzen.com/configuration

其中，文档中还缺少dpi，dpi就是像素的意思，dpi的值越大，证明图片约清晰，我这里选择的是300

注意事项：界面隐藏、透明度为0都不能够截图成功

3、jspdf

文档：https://www.freesion.com/article/97121153598/
https://parall.ax/products/jspdf
https://www.hangge.com/blog/cache/detail_2205.html

每个文档介绍的不是很全面，所以，需要几个文档对比观看下

4、代码展示

import html2Canvas from 'html2canvas'import JsPDF from 'jspdf'export const getPdf = (title) =>{
    return new Promise(resolve => {
        html2Canvas(document.querySelector('#resultsHuiZongTableId'), {
            allowTaint: false,
            useCORS: true, // allowTaint、useCORS只能够出现一个
            imageTimeout: 0,
            dpi: 300,  // 像素
            scale: 4,  // 图片大小
        }).then(function (canvas) {
            // document.body.appendChild(canvas)
            // 用于将canvas对象转换为base64位编码
            let pageData = canvas.toDataURL('image/jpeg', 1.0),
                canvasWidth = canvas.width,
                canvasHeight = canvas.height,
                concentWidth = 500,
                concentHeight = Math.round((concentWidth / canvasWidth) * canvasHeight),
                position = 72,
                pageHeight = 892,
                height = concentHeight
            console.log(height, pageHeight)
            // 新建一个new JsPDF，A3的像素大小 842*1191，A4的像素大小 592*841。这个px像素不准确，不清楚他们的像素大小来源如何
            let PDF = new JsPDF('p', 'px', 'a3')
            if (height <= pageHeight) {
                // 添加图片
                PDF.addImage(pageData, 'JPEG', 68, position, concentWidth, concentHeight)
            } else {
                while (height > 0) {
                    PDF.addImage(pageData, 'JPEG', 68, position, concentWidth, concentHeight)
                    height -= pageHeight
                    position -= pageHeight                    if (height > 0) {
                        PDF.addPage()
                    }
                }
            }
            // 保存 pdf 文档
            PDF.save(`${title}.pdf`)
            resolve(true)
        })
    })}

<div class="conts" id="resultsHuiZongTableId" style="width:900px;" ></div>

5、效果展示

效果展示.png

隐藏了部分敏感信息

欢迎大家点赞、收藏，评论一起讨论

作者：柯柯的呵呵哒
链接：https://www.jianshu.com/p/318285100592