当前位置：首页 > news >正文

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

news 2025/9/9 5:29:30

基于若依框架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>

注意事项

跨域图片问题：如果导出的内容中包含跨域图片，需要确保图片服务器允许跨域访问，否则html2canvas可能无法正确渲染图片。
样式问题：确保导出的HTML元素样式在打印时正确显示，可以通过CSS媒体查询调整打印样式：
```
@media print {body {visibility: hidden;}#pdf-content {visibility: visible;}
}
```

分页问题：如果需要分页，可以在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;
}