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

最新推荐文章于 2024-08-20 05:49:37 发布

m0_67403188

最新推荐文章于 2024-08-20 05:49:37 发布

阅读量939

点赞数 1

分类专栏：前端 html 文章标签： vue.js typescript javascript

本文链接：https://blog.csdn.net/m0_67403188/article/details/123349363

版权

本文介绍了如何利用html2canvas截取前端页面生成canvas，再通过jsPDF将内容转化为高清PDF，以满足前端打印需求。在解决截图模糊问题时，通过自定义canvas属性及调整坐标解决了清晰度和Y轴偏移问题。提供了一个完整的长截屏转换PDF的示例代码，并鼓励读者提出建议和优化。

摘要由CSDN通过智能技术生成

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

原图截图