一种进行页面截图和将页面导出为PDF的方法 | 青训营笔记

这是我参与「第四届青训营 」笔记创作活动的第20天

最近在忙于前端大项目的设计开发。其中我们想添加一个一键截图/导出PDF功能。这一功能被广泛用于线上购票的凭证或者填写申请表格/问卷后的结果记录。下面作者将分享一种截图和导出PDF功能的实现方式：

截图操作

截图操作主要依赖于使用html2Canvas库。其基本原理是：

1.安装并引入html2Canvas:
    npm install html2canvas --save
    import html2canvas from "html2canvas";

2.编写一个截图按钮

3.我们可以手动创建一个canvas标签，方便canvas找到父级计算宽高

4.将宽高放大从而防止图片模糊，并将图片格式转化为base64

5.直接创建一个a标签直接下载

下面给出参考代码：

        toImage () {
            const canvas = document.createElement("canvas")
            let canvasBox = this.$refs.imageTofile
            const width = parseInt(window.getComputedStyle(canvasBox).width)
            const height = parseInt(window.getComputedStyle(canvasBox).height)
            canvas.width = width * 2
            canvas.height = height * 2
            canvas.style.width = width + 'px'
            canvas.style.height = height + 'px'
            const context = canvas.getContext("2d");
            context.scale(2, 2);
            const options = {
                backgroundColor: null,
                canvas: canvas,
                useCORS: true
            }
            html2canvas(canvasBox, options).then((canvas) => {
                let dataURL = canvas.toDataURL("image/png")
                console.log(dataURL)
                this.downloadImage(dataURL)
            })
        },

        downloadImage(url) {
            let a = document.createElement('a')
            a.href = url
            a.download = '首页截图'
            a.click()
        },

当然，这种方法具有先天不足，即：

• 较不清晰
• 没有提前预览
• 不适合保存过长分页内容

为解决以上不足，我们需要采用另一种方法，即调用浏览器window.print()，手动导出PDF

导出PDF文件

这里不展示具体代码，仅展示部分思路。首先输入以下命令：

将页面html转换成图片
npm install --save html2canvas 
将图片生成pdf
npm install jspdf --save

其次，我们需要定义一个全局函数, 新建JsPDF对象并判断是否分页。通过PDF.save(title + '.pdf')来进行打印下载。 在main.js中使用定义的函数文件，定义全局。

这种方法的优点在于：

• 可以提前预览
• 适合保存过长分页内容比较合适
• 直接由浏览器API保存，内容清晰
• 开发便利快速

本人才疏学浅，难免讲解有不到位之处。感谢大家的阅读，如有错误，欢迎于评论区批评指正！