vue中将html导出成pdf

vue 中将页面 html 内容导出成 pdf 文件格式，使用 html2canvas 、jspdf 。

首先使用 html2canvas 将内容转换为图片，之后写入 pdf 。

1、引用

第一个.将页面html转换成图片
npm install --save html2canvas 
第二个.将图片生成pdf
npm install jspdf --save

2、创建  exportToPdf.js ，放入导出方法

// exportToPdf.js
import html2canvas from 'html2canvas';
import jsPDF from 'jspdf';

export function exportToPDF(fileName,elementId) {
  // 根据元素ID获取要导出的元素
  const element = document.getElementById(elementId);
  if (!element) {
    console.error('无法找到指定的元素');
    return;
  }

  // 使用 html2canvas 将元素转换为 canvas
  html2canvas(element).then(canvas => {
    // 创建一个新的 jsPDF 实例
    const pdf = new jsPDF('p', 'mm', 'a4');

  // 将 canvas 转换为图片并添加到 PDF
  const imgProps = canvas.toDataURL('image/png');
  const imgPropsArr = imgProps.split(','), mimeType = imgPropsArr[0].match(/:(.*?);/)[1];
  const img = new Image();

  img.onload = function() {
    // 获取图片的宽高
    const pdfWidth = pdf.internal.pageSize.getWidth();
    const pdfHeight = (img.height * pdfWidth) / img.width;

    // 添加图片到 PDF
    pdf.addImage(imgProps, mimeType, 0, 0, pdfWidth, pdfHeight);

    // 保存 PDF
    pdf.save(fileName);

    //预览
    /* // 生成PDF的Blob对象
     const pdfBlob = pdf.output('blob');
     // 创建一个指向Blob对象的URL
     const pdfUrl = URL.createObjectURL(pdfBlob);
     // 打开新窗口预览PDF
     const win = window.open();
     win.document.write(`
   <html>
     <head>
       <title>PDF Preview</title>
     </head>
     <body>
       <embed src="${pdfUrl}" type="application/pdf" width="100%" height="100%">
     </body>
   </html>
 `);*/
    // 你可以选择在预览后释放URL，但这会关闭预览（如果浏览器支持）
    //URL.revokeObjectURL(pdfUrl);
  };

  img.src = imgProps;
}).catch(error => {
    console.error('导出PDF时发生错误:', error);
});
}

　　3、vue中

<template>
  <div style="text-align: center">
    <div>
      <div>
        <button type="button" @click="pdfBtn">导出PDF</button>
      </div>
      <div id="pdfDom" >
        <div>内容</div>
      </div>
    </div>
  </div>
</template>

<script>
  // 导入exportToPDF函数
  import { exportToPDF } from '@/utils/feature/exportToPdf';

    export default {
      name: "exportpdf",
      data(){
        return{
          htmlTitle:'页面导出PDF文件名',
        }
      },
      methods:{
        pdfBtn(){
          exportToPDF(this.htmlTitle,'pdfDom');
        },

      }
    }
</script>

<style scoped>

</style>

　　

posted on 2024-06-05 13:49  七七2020  阅读(190)  评论(0)    收藏  举报

导航