vue2之页面生成PDF导出并适应A4页面

一、技术

　　vue2 、 elementUI 、 html2canvas  、 jsPDF

二、技术官网

　　vue2：https://cn.vuejs.org/

　　elementUi：https://element.eleme.cn/#/zh-CN

　　html2canvas：https://html2canvas.hertzen.com/

　　jsPDF：https://www.npmjs.com/package/jspdf

三、优缺点

　　优点：只需要请求回来数据，前端自动可以生成PDF导出

　　缺点：生成的 pdf 比较糊，而且表格在分页的时候容易分裂

四、实现思路

　　① 将 html 先转换成 canvas ，然后生成图片，最后再将图片转换成 pdf

　　② 需要先把页面适配一下 A4 纸张大小，不然下面切割的话会出问题

五、主要代码

import html2canvas from 'html2canvas'
import { jsPDF } from 'jspdf'

async handleUploadHTMLPDF() {
  try {
        // 获取dom元素
        const dom: any = document.querySelector('#id名称')
        if (dom) {
            html2canvas(dom).then(async canvas => {
                // A4纸，纵向
                let pdf = new jsPDF('p', 'mm', 'a4') 
                let ctx: any = canvas.getContext('2d')
                let a4w = 190
                 // A4大小，210mm x 297mm，四边各保留10mm的边距，显示区域190x277
                let a4h = 277
                // 按A4显示比例换算一页图像的像素高度
                let imgHeight = Math.floor((a4h * canvas.width) / a4w) 
                let renderedHeight = 0
                while (renderedHeight < canvas.height) {
                    let page: any = 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
                    )
                    // 添加图像到页面，保留10mm边距
                    pdf.addImage(
                        page.toDataURL('image/jpeg', 1.0),
                        'JPEG',
                        10,
                        10,
                        a4w,
                        Math.min(a4h, (a4w * page.height) / page.width)
                    ) 

                    renderedHeight += imgHeight
                    if (renderedHeight < canvas.height) {
                         // 如果后面还有内容，添加一个空页
                        pdf.addPage()
                    }
                    // delete page;
                }
                // 保存文件
                pdf.save('文档名称.pdf')
            })
        }
    } catch (err) {
        console.log(err)
    }
}

　　注：该文档为个人理解所写，有误可建议修改