html2Canvas+JsPDF生成pdf文件并下载

采用html2Canvas+JsPDF实现web页面/dom元素转pdf文件并下载

1、安装html2Canvas:

npm install html2canvas

2、安装JsPDF：

npm install jspdf

/**
 * 生成PDF格式文件并下载
 * @param {*} el 页面元素名
 * @param {*} title 文件名称
 * @returns 
 */
export function generatePdf(el, { title = '' }) {
    return new Promise((resolve) => {
        html2canvas(document.querySelector(el), {
            allowTaint: true,
            scale: 2
        }).then((canvas) => {
            // 得到canvas画布的单位是px 像素单位
            var contentWidth = canvas.width
            var contentHeight = canvas.height

            // 将canvas转为base64图片
            var pageData = canvas.toDataURL('image/jpeg', 1.0)

            // 设置pdf的尺寸，pdf要使用pt单位 已知 1pt/1px = 0.75   pt = (px/scale)* 0.75
            // 2为上面的scale 缩放了2倍
            var pdfX = (contentWidth + 30) / 2 * 0.75
            var pdfY = (contentHeight + 30) / 2 * 0.75 // 500为底部留白

            // 设置内容图片的尺寸，img是pt单位 
            var imgX = pdfX
            var imgY = (contentHeight / 2 * 0.75) // 内容图片这里不需要留白的距离

            // 初始化jspdf 第一个参数方向：默认''时为纵向，第二个参数设置pdf内容图片使用的长度单位为pt，第三个参数为PDF的大小，单位是pt
            let PDF = new JsPDF('', 'pt', [pdfX, pdfY])

            // 将内容图片添加到pdf中，因为内容宽高和pdf宽高一样，就只需要一页，位置就是 0,0
            PDF.addImage(pageData, 'jpeg', 0, 0, imgX, imgY)
            PDF.save(title + '.pdf')
            resolve()
        })
    })
}