Vue 生成PDF并下载

## 实现原理
### 该功能原理是将页面转化伟canvas在把canvas转化为base64数据 最后将数据通过pdf.js生成下载，故需要和html2canvas一起使用
友情提醒这个pdf下载不能在app里直接使用，ios里面变成在线预览功能;
window.scrollTo(0, 0); const element = document.querySelector('#showContent');// 这个dom元素是要导出pdf的div容器 setTimeout(() => { html2canvas(element, { height: this.$refs.footer.offsetTop, useCORS: true // 如果说所生成的页面中带有跨域的图片，这个useCors需要设置为True 否则画布被污染不会显示 }).then((canvas) => { console.log(canvas); const contentWidth = canvas.width; const contentHeight = canvas.height; // 一页pdf显示html页面生成的canvas高度; const pdfX = (contentWidth + 10) / 2 * 0.75; const pdfY = (contentHeight + 500) / 2 * 0.75;// 500为底部留白 const imgX = pdfX; const imgY = (contentHeight / 2 * 0.75);// 内 const pageData = canvas.toDataURL('image/jpeg', 1.0); const pdf = new JsPDF('', 'pt', [pdfX, pdfY]); // 有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89) // 内容未超过pdf一页显示的范围，无需分页 pdf.addImage(pageData, 'jpeg', 0, 0, imgX, imgY); pdf.save(1234 + '.pdf'); // 生成的文件名字

原文地址：https://www.cnblogs.com/wangjiahui/p/11978053.html