html标签生成图片下载成为pdf

2021-12-23

写入mixins里面做成公用的

npm install jspdf

npm i html2canvas

import html2canvas from "html2canvas" import jsPDF from "jspdf" export const download = {     methods: {         addcanvas() {
            html2canvas(this.$refs.wrapper, {                 allowTaint: true,                 useCORS: true // 解决跨域问题             }).then(canvas => {                 let dataURL = canvas.toDataURL("image/png", 1);                 console.info(dataURL)                     // let oA = document.createElement("a");                     // oA.download = '';// 设置下载的文件名，默认是'下载'                     // oA.href = dataURL;                     // document.body.appendChild(oA);                     // oA.click();                     // oA.remove(); // 下载之后把创建的元素删除
                let contentWidth = canvas.width;                 let contentHeight = canvas.height;                 //一页pdf显示html页面生成的canvas高度;                 let pageHeight = contentWidth / 592.28 * 841.89;                 //未生成pdf的html页面高度                 let leftHeight = contentHeight;                 //页面偏移                 let position = 0;                 //a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高                 let imgWidth = 595.28;                 let imgHeight = 592.28 / contentWidth * contentHeight;                 let pdf = new jsPDF('', 'pt', 'a4')                 if (leftHeight < pageHeight) {                     pdf.addImage(dataURL, 'png', 0, 0, imgWidth, imgHeight);                 } else {                     while (leftHeight > 0) {                         pdf.addImage(dataURL, 'png', 0, position, imgWidth, imgHeight)                         leftHeight -= pageHeight;                         position -= 841.89;                         //避免添加空白页                         if (leftHeight > 0) {                             pdf.addPage();                         }                     }                 }                 pdf.save("tsx.pdf");             });


        },     }, }