vue 前端生成图片转成PDF下载(不经过后台)

前言

         公司自研项目需求，针对报告页面支持下载PDF文件格式，一般回想到通过后台接口实现该功能，后有研究发现前端也可以实现。                                                                                                      实现思路是首先通过html2canvas将需要转换的页面转成图片，再通过jspdf将转换后的图片生成PDF导出。

使用步骤

首先安装所需要的依赖  npm install html2canvas --save    npm install jspdf --save 

其次 话不多说 直接上代码

'pdf'为所需要转换的dom id类

之所以第一行代码，要给该元素滚动条设置到最上面，因为我这个需要转换的元素在页面上有滚动条，设置到最上面方便截全，其次给高度设置了scrollHeight，转换成功过后又设置成原来的，是为了全部转换过后，不然转换的只有当前可视区域的部分。