package配置pdfmake html2canvas,然后npm安装
"pdfmake": "0.2.10",
"html2canvas": "1.4.1",
使用如下,
html里面组件加个id为exportPdf
然后调用下面的方法即可
输出的pdf为整个组件的截图
import * as pdfMake from 'pdfmake/build/pdfmake';
import html2canvas from 'html2canvas';exportPdf() {const widthScale = 2;const pdfWidth = 600 * widthScale; // pdf宽度const cntElem = document.getElementById('exportPdf');// 组件的idconst width = cntElem.offsetWidth;const height = cntElem.scrollHeight;const scale = 3; // 数字越大,导出的pdf越清晰const opts = {scale: scale,width: width,height: height,useCORS: true,};html2canvas(cntElem, opts).then(canvas => {const contents = [];contents.push({image: canvas.toDataURL('image/jpeg'),width: pdfWidth,});pdfMake.createPdf({pageSize: {width: pdfWidth,height: pdfWidth / (width / height), // 按照实际高度比,自定义pdf高度},pageMargins: [0, 0],content: contents,}).download('11111');//1111是pdf的名称});}