vue中用最简单的方式把网页生成pdf|当前滚动

【资料图】

首先需要安装html2canvas和jspdf

第二步，在vue项目的utils文件夹下新建html2Pdf.js的文件。html2Pdf.js代码如下

这段代码定义了一个Vue插件，可以向所有Vue实例添加一个名为getPdf()的方法。这个方法需要传入两个参数：一个是HTML元素的ID，另一个是生成PDF文件的名称。

插件使用html2canvas库将具有指定ID的元素的HTML内容转换为画布元素，然后使用jsPDF库将画布转换为PDF。最终生成的PDF文件会被下载，并以传入的名称加上.pdf后缀。

html2canvas的allowTaint选项被设置为true，这允许该库从其他域捕获图像。但这可能存在安全风险，因此请小心使用。

html2canvas的scale选项被设置为2，这可以提高生成图像的质量，但也会增加文件大小。请根据具体用例需要调整这个值。

第三步再main.js中引入

第四步：在html模版中添加ID"pdfDoom"并添加触发生成pdf的事件

这样就完成了网页导出pdf了

关键词：