vue中将html导出成pdf_vue html转pdf

作者：正经夜光杯 | 2024-07-25 12:54:36

踩

vue html转pdf

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

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

参考链接：vue页面导出pdf，预览并下载（pc端） - 简书

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>

-- 更新，上面方法测试发现仅能导出一页的内容，找到了导出多页的方法

原理：获取需要导出内容页面的总高度，根据A4纸张的高度，pdf中循环添加多页，直到全部绘制结束后导出pdf。

缺点：很多地方强制截断了，看起来很别扭，而且页边距也不好控制。


methods: {
	async exportToPDF2() {
          const content = document.getElementById('pdfDom');
 
          // 获取页面高度和宽度（这里需要调整以适应你的内容）
          const pageHeight = content.scrollHeight || content.clientHeight;
          const pageWidth = content.scrollWidth || content.clientWidth;
 
          // 创建一个新的 jsPDF 实例
          const pdf = new jsPDF('p', 'mm', 'a4'); // 'p' 代表 portrait（纵向），'mm' 代表毫米，'a4' 代表 A4 纸张大小
 
          // 定义内容的高度和宽度，以及每页的高度（这里需要调整以适应你的内容）
          const contentLeft = 0; // 内容左边距
          const contentTop = 0; // 内容上边距
          const contentWidth = pageWidth - 2 * contentLeft; // 内容宽度（减去左右边距）
 
          // 假设的页面尺寸和边距
          const pageSize = {
            width: 595.28, // A4 纸宽度，单位：点（1英寸 = 72点）
            height: 841.89 // A4 纸高度，单位：点
          };
          // 计算当前页面可以容纳的内容高度
          const contentHeight = pageSize.height - contentTop;
          const imgProps = { scale: 1 }; // 用于 html2canvas 的图像属性
 
          let position = 0; // 初始化内容在 PDF 中的位置
          let y = contentTop; // 初始化 PDF 页面上的 y 坐标
 
          // 循环直到所有内容都被导出
          while (position < pageHeight) {
            // 计算当前页面的内容高度（可能需要调整以确保内容不会溢出）
            const pageContentHeight = (y + contentHeight > pageHeight) ? pageHeight - y : contentHeight;
 
            // 使用 html2canvas 捕获当前页面的内容
            const canvas = await html2canvas(content, {
              // 你可以在这里添加更多的 html2canvas 配置选项
              height: pageContentHeight,
              width: contentWidth,
              x: 0,
              y: position,
              scale: 1,
              ...imgProps,
            });
 
            // 将 canvas 添加到 PDF 页面中
            const imgData = canvas.toDataURL('image/png');
            const imgPropsPDF = pdf.getImageProperties(imgData);
            const pdfWidth = pdf.internal.pageSize.getWidth();
            const pdfHeight = (imgPropsPDF.height * pdfWidth) / imgPropsPDF.width;
            pdf.addImage(imgData, 'PNG', pdfWidth, y+pdfHeight, pdfWidth, pdfHeight);
 
            // 更新 y 坐标以便下一页的内容
            y += pdfHeight + 10; // 10 是页面间的间距，可以根据需要调整
            // 如果内容超出了当前页面，则添加新页面
            if (y > pdfHeight) {
              if(position+contentHeight < pageHeight) {
                pdf.addPage();
              }
              y = contentTop;
              position += contentHeight; // 更新内容在原始 HTML 中的位置
            }
          }
 
          // 保存 PDF
          pdf.save('exported.pdf');
        }
}