前端导出pdf

07-14 1341阅读

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")  
      // },
    
生成PDF

解决图片无法显示问题

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');
 },
前端导出pdf
(图片来源网络,侵删)
VPS购买请点击我

文章版权声明:除非注明,否则均为主机测评原创文章,转载或复制请以超链接形式并注明出处。

目录[+]