vue3+ts使用html2canvas，jspd导出pdf文件

Grocery store owner2024-09-03 20:06

下载依赖包

javascript 复制代码

npm install html2canvas jspdf

使用

javascript 复制代码

<div ref="pdfContentref" id="content-to-print" class="contengt">
	// 里面编写需要导出的页面
</div>
<el-button @click="exportPdf" type="primary" class="btn">导出PDF</el-button>

引入

javascript 复制代码

import html2canvas from 'html2canvas';
import jsPDF from 'jspdf';
const pdfContentref = ref<any>(null);

核心代码

javascript 复制代码

const exportPdf = () => {
    const content = pdfContentref.value;
    exportDataPdf(content)
}
const exportDataPdf = (el: any) => {
  html2canvas(el, {
    scale: 3, // 设置缩放
    useCORS: true, // 允许canvas画布内 可以跨域请求外部链接图片, 允许跨域请求。
    allowTaint: true,
    logging: false, // 打印日志用的 可以不加默认为false
    backgroundColor: '#ffffff'
  }).then((canvas) => {
    console.log('生成');
    const imgData = canvas.toDataURL('image/jpeg', 1.0);
      console.log(imgData);
      const pdf = new jsPDF();
        const imgProps= pdf.getImageProperties(imgData);
        const pdfWidth = pdf.internal.pageSize.getWidth();
        const pdfHeight = (imgProps.height * pdfWidth) / imgProps.width;
        pdf.addImage(imgData, 'PNG', 0, 0, pdfWidth, pdfHeight);
        pdf.save('测试.pdf');
    
  })
}