JS案例：将前端页面导出为PDF

前言：
记录一下最近的一个需求，产品需要打印表单凭证，需要实现将选中页面的元素或者是组件导出为PDF，方便打印
使用到的JS库：html2canvas（截取页面生成canvas），jsPDF（使用JS生成PDF）

下面我针对该需求实现一个简单的Demo，并且分享一下遇到的问题

首先，我选择了懒加载的案例作为测试对象，因为图片可以检测截图效果，并且有滚动加载长页面
我们把整个demo分为两部分，分别是使用上述两个插件实现基本功能

使用html2canvas截屏生成canvas

        let printEle, //截图按钮
            pdfEle, //待截取标签
            canvasBox //canvas显示区域

        (function init(_win, _dom) {
            printEle = _dom.querySelector('#printEle')
            pdfEle = _dom.querySelector('#pdfEle')
            canvasBox = _dom.querySelector('#canvasBox')
            printEle.addEventListener('click', clickHandler) //点击按钮生成截屏
        })(window, document)

        async function clickHandler(e) {
            if (canvasBox.children.length) return //若canvas显示区域已经有标签则退出
            const canvas = await html2canvas(pdfEle, { //截取标签转换为canvas
                background: '#FFFFFF',
            })
            pdfEle.hidden = true //隐藏之前的元素，更好对比
            canvasBox.appendChild(canvas) //显示效果
        }

原图 截图