vue实现前端导出
Vue 实现前端导出的方法
使用 xlsx 库导出 Excel
安装 xlsx 库：
npm install xlsx在 Vue 组件中引入并使用：
import * as XLSX from 'xlsx';
const exportToExcel = () => {
const data = [
['Name', 'Age', 'Country'],
['Alice', 25, 'USA'],
['Bob', 30, 'UK']
];
const ws = XLSX.utils.aoa_to_sheet(data);
const wb = XLSX.utils.book_new();
XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');
XLSX.writeFile(wb, 'export.xlsx');
};使用 file-saver 和 xlsx 导出 CSV
安装依赖：
npm install file-saver xlsx导出 CSV 的代码示例：
import { saveAs } from 'file-saver';
import * as XLSX from 'xlsx';
const exportToCSV = () => {
const data = [
['Name', 'Age', 'Country'],
['Alice', 25, 'USA'],
['Bob', 30, 'UK']
];
const csvContent = data.map(row => row.join(',')).join('\n');
const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
saveAs(blob, 'export.csv');
};使用 html-to-image 导出图片
安装 html-to-image：
npm install html-to-image导出图片的示例：
import * as htmlToImage from 'html-to-image';
const exportToPNG = async () => {
const element = document.getElementById('export-element');
const dataUrl = await htmlToImage.toPng(element);
const link = document.createElement('a');
link.download = 'export.png';
link.href = dataUrl;
link.click();
};使用 jspdf 导出 PDF
安装 jspdf：
npm install jspdf导出 PDF 的代码：
import { jsPDF } from 'jspdf';
const exportToPDF = () => {
const doc = new jsPDF();
doc.text('Hello World!', 10, 10);
doc.save('export.pdf');
};使用原生 Blob 导出文本文件
无需额外库，直接使用浏览器 API：
const exportToTxt = () => {
const content = 'This is a text file.';
const blob = new Blob([content], { type: 'text/plain' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'export.txt';
a.click();
URL.revokeObjectURL(url);
};注意事项
- 导出 Excel 或 CSV 时，确保数据格式正确，避免包含特殊字符。
- 导出图片或 PDF 时，注意目标元素的样式和布局，确保导出效果符合预期。
- 对于大型数据，考虑分块处理或使用 Web Worker 避免阻塞主线程。
