基于若依框架Vue+TS导出PDF文件的方法

基于若依框架Vue+TS导出PDF文件的方法

在若依框架（Vue + TypeScript）中导出PDF文件，可以通过以下方法实现。主要使用html2canvas和jspdf两个库，将HTML内容转换为Canvas，再生成PDF文件。

安装依赖库

需要安装html2canvas和jspdf库。可以通过npm或yarn安装：

npm install html2canvas jspdf --save

或

yarn add html2canvas jspdf

封装PDF导出工具函数

创建一个工具函数，用于将指定的HTML元素转换为PDF文件。以下是一个示例工具函数：

// utils/pdfExport.ts
import html2canvas from 'html2canvas';
import { jsPDF } from 'jspdf';

/**
 * 导出PDF文件
 * @param elementId 需要导出的HTML元素ID
 * @param fileName 导出的PDF文件名
 */
export const exportToPdf = async (elementId: string, fileName: string) => {
  const element = document.getElementById(elementId);
  if (!element) {
    console.error('Element not found');
    return;
  }

  const canvas = await html2canvas(element, {
    scale: 2, // 提高导出清晰度
    useCORS: true, // 允许跨域图片
  });

  const imgData = canvas.toDataURL('image/png');
  const pdf = new jsPDF('p', 'mm', 'a4');
  const imgWidth = 210; // A4纸宽度
  const imgHeight = (canvas.height * imgWidth) / canvas.width;

  pdf.addImage(imgData, 'PNG', 0, 0, imgWidth, imgHeight);
  pdf.save(`${fileName}.pdf`);
};

在Vue组件中使用

在需要导出PDF的Vue组件中，调用exportToPdf函数。以下是一个示例：

<template>
  <div>
    <div id="pdf-content">
      <!-- 需要导出的内容 -->
      <h1>若依框架导出PDF示例</h1>
      <p>这是一段测试内容，用于演示PDF导出功能。</p>
    </div>
    <el-button @click="handleExportPdf">导出PDF</el-button>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import { exportToPdf } from '@/utils/pdfExport';

export default defineComponent({
  name: 'PdfExportDemo',
  methods: {
    handleExportPdf() {
      exportToPdf('pdf-content', '若依导出示例');
    },
  },
});
</script>

注意事项

1. 跨域图片问题：如果导出的内容中包含跨域图片，需要确保图片服务器允许跨域访问，否则html2canvas可能无法正确渲染图片。
2. 样式问题：确保导出的HTML元素样式在打印时正确显示，可以通过CSS媒体查询调整打印样式：

   @media print {
     body {
       visibility: hidden;
     }
     #pdf-content {
       visibility: visible;
     }
   }
   

3. 分页问题：如果需要分页，可以在jsPDF中手动控制分页逻辑，例如：

   const pdf = new jsPDF('p', 'mm', 'a4');
   const pageHeight = pdf.internal.pageSize.getHeight();
   
   let position = 0;
   pdf.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight);
   position -= pageHeight;
   
   if (position < 0) {
     pdf.addPage();
     position = 0;
   }
   

其他方案

如果需要更复杂的PDF导出功能（如表格、图表等），可以考虑以下方案：

• pdfmake：支持直接生成PDF文件，无需转换为Canvas。
• vue-html2pdf：基于html2canvas和jspdf的Vue插件，提供更简单的API。

以上方法适用于若依框架（Vue + TypeScript）中的PDF导出需求，根据实际场景调整即可。