前端实现PDf文件下载功能

南风贰拾捌 2024-06-15 17:03:02 阅读 56

前言:pc端需要实现生成PDF并下载的功能。

方法一:侧重点在前端,后端只需要配合把PDF所需要的数据给到前端即可。

准备工作:需要npm install 这两个插件,html2Canvas,JsPDF。

注:上面给的不是npm的命令,不可以直接当做npm命令使用

//引入import html2Canvas from 'html2canvas'import JsPDF from 'jspdf'// 也可以在main.js文件里面引入,并把getPdf方法绑定在vue实例上,全局使用

生成PDF的容器,里面样式根据需求自行加入

<div id="pdfDom"></div>

this.getPdf('name', '#pdfDom') //这里调用,传参可自定义,但id必须有

//核心代码getPdf(name, id) { const that = this html2Canvas(document.querySelector(id)<



声明

本文内容仅代表作者观点,或转载于其他网站,本站不以此文作为商业用途
如有涉及侵权,请联系本站进行删除
转载本站原创文章,请注明来源及作者。