【资料图】
首先需要安装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了