前端vue需求：将当前页面转成图片或者PDF并下载

一，下载依赖并引用

npm install html2canvas jspdf

import html2canvas from "html2canvas";

import jsPDF from "jspdf";

二，选取div

<div class="app-container" id="vueCapture">xxxx</div>

如果页面里有元素不想要，必须用样式消失

:class="hideHeader ? 'hideClass' : ''"

data(){

return{

hideHeader: false,

}

}

.hideClass {

display: none;

}

建议用nextTick包裹，确保样式生效

this.hideHeader = true;

this.$nextTick(() => {

...

});

三，前端转化

html2canvas(document.querySelector("#vueCapture"), {

// allowTaint: true, //允许跨域

// taintTest: false,

// useCORS: true,

// y: 0, // 对Y轴进行裁切

// // width:1200,

// // height:5000,

dpi: window.devicePixelRatio * 2, //将分辨率提高到特定的DPI 提高四倍

scale: 2, //按比例增加分辨率

}).then((canvas) => {

let contentWidth = canvas.width;

let contentHeight = canvas.height;

let pageHeight = (contentWidth / 592.28) * 841.89;

let leftHeight = contentHeight;

let position = 0;

let imgWidth = 595.28;

let imgHeight = (592.28 / contentWidth) * contentHeight;

let pageData = canvas.toDataURL("image/jpeg", 1.0);

//方式一：采用一页纸，不分页

let PDF = new jsPDF("", "pt", [595.28, imgHeight]);

PDF.addImage(pageData, "JPEG", 0, 0, imgWidth, imgHeight);

//方式二：pdf里分页，但是会有图片被截俩半的风险，需要根据实际情况调整

// let PDF = new jsPDF("", "pt", "a4");

// if (leftHeight < pageHeight) {

// PDF.addImage(pageData, "JPEG", 0, 0, imgWidth, imgHeight);

// } else {

// while (leftHeight > 0) {

// PDF.addImage(pageData, "JPEG", 0, position, imgWidth, imgHeight);

// leftHeight -= pageHeight;

// position -= 841.89;

// if (leftHeight > 0) {

// PDF.addPage();

// }

// }

// }

PDF.save("capture.pdf");

this.hideHeader = false;

});

});