前端导出pdf

async generatePDF() {
        const element = this.$refs.contentToPrint; // 你想要转换成PDF的DOM元素
        
  
        // 使用html2canvas将DOM元素转换成canvas
        const canvas = await html2canvas(element);
        const imgData = canvas.toDataURL('image/png');
  
        // 创建PDF并添加图片
        const pdf = new jsPDF({
          orientation: 'portrait',
          unit: 'px',
          format: 'a4',
        });
        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('download.pdf'); // 保存PDF
      },
      // generatePDF() {  
      //   const doc = new jsPDF()  
      //   doc.text("Hello world!", 10, 10)  
      //   doc.save("a4.pdf")  
      // },

    <div>
      <el-button type="primary" @click="generatePDF">生成PDF</el-button>  
    </div>
    <div style="padding:20px 10px"  ref="contentToPrint">
    </div>

解决图片无法显示问题

async generatePDF() {
        const element = document.getElementById('content'); // 你想要导出为PDF的DOM元素
        const opts = {
          scale: 4, // 缩放比例，提高生成图片清晰度
          useCORS: true, // 允许加载跨域的图片
          // allowTaint: false, // 允许图片跨域，和 useCORS 二者不可共同使用
          tainttest: true, // 检测每张图片都已经加载完成
          logging: true // 日志开关，发布的时候记得改成 false
        }
        const canvas = await html2canvas(element,opts);
        const imgData = canvas.toDataURL('image/png');
        const pdf = new jsPDF('p', 'mm', 'a4');
        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('download.pdf');
 },