html2Canvas + JsPDF 导出pdf文件踩坑记录

需求

导出A4大小的pdf文件

现象

浏览器不缩放的情况下，导出内容正常，但是win10 默认是放大1.5倍

结果就导致导出的文字重叠

解决方法

度娘搜了一下大家的意见，比较有用的就是 letter-spacing，但是无果。所以想到了planB 既然是transform导致的，那我直接复制一份放到body，不缩放用完再删除不就ok。尝试一下问题解决。

let modalDiv = document.querySelector('.jw_reportBox')
let newDiv = modalDiv.cloneNode(true)
newDiv.id = 'reportId'
document.body.appendChild(newDiv)
let obj = document.getElementById('reportId')
html2Canvas(obj, { allowTaint: true }).then(canvas => {
    let contentWidth = canvas.width
    let contentHeight = canvas.height
    let pageHeight = contentWidth / 592.28 * 841.89
    let leftHeight = contentHeight
    let position = 0
    let imgWidth = 595.28
    let imgHeight = 592.28 / contentWidth * contentHeight
    let pageData = canvas.toDataURL('image/jpeg', 1.0)
    let PDF = new JsPDF('p', 'pt', 'a4') // [592.28 * 841.89]
    if (leftHeight < pageHeight) {
        PDF.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight)
    } else {
        // 5 为误差值
        while (leftHeight > 5) {
            PDF.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
            leftHeight -= pageHeight
            position -= 841.89
            if (leftHeight > 5) {
                PDF.addPage()
            }
        }
    }
    PDF.save(title + '.pdf')
    obj.remove()
})

总结

前端菜鸡一个，如果哪里写的不对请留言指导一下，请大佬轻喷