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

最新推荐文章于 2025-11-07 21:31:20 发布

原创

最新推荐文章于 2025-11-07 21:31:20 发布 · 4k 阅读

31 ·

CC 4.0 BY-SA版权

文章标签：

#canvas #javascript

本文介绍了一种将网页元素转化为PDF的方法，通过html2canvas和jsPDF库实现。首先，利用html2canvas截取页面元素生成canvas，然后通过调整canvas的缩放比例解决截图模糊问题。接着，使用jsPDF将canvas转为PDF并下载。在处理过程中，解决了Y轴偏移和清晰度调整的问题，提供了一段完整的代码示例。

前言：
记录一下最近的一个需求，产品需要打印表单凭证，需要实现将选中页面的元素或者是组件导出为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) //显示效果
        }

原图 &