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'); // 生成的文件名字