🎬 HoRain云小助手：个人主页
🔥 个人专栏: 《Linux 系列教程》《c语言教程》
⛺️生活的理想，就是为了理想的生活!
⛳️ 推荐
前些天发现了一个超棒的服务器购买网站，性价比超高，大内存超划算！忍不住分享一下给大家。点击跳转到网站。
专栏介绍
专栏名称 | 专栏介绍 |
《C语言》 | 本专栏主要撰写C干货内容和编程技巧，让大家从底层了解C，把更多的知识由抽象到简单通俗易懂。 |
《网络协议》 | 本专栏主要是注重从底层来给大家一步步剖析网络协议的奥秘，一起解密网络协议在运行中协议的基本运行机制！ |
《docker容器精解篇》 | 全面深入解析 docker 容器，从基础到进阶，涵盖原理、操作、实践案例，助您精通 docker。 |
《linux系列》 | 本专栏主要撰写Linux干货内容，从基础到进阶，知识由抽象到简单通俗易懂，帮你从新手小白到扫地僧。 |
《python 系列》 | 本专栏着重撰写Python相关的干货内容与编程技巧，助力大家从底层去认识Python，将更多复杂的知识由抽象转化为简单易懂的内容。 |
《试题库》 | 本专栏主要是发布一些考试和练习题库（涵盖软考、HCIE、HRCE、CCNA等） |
目录
⛳️ 推荐
专栏介绍
Vue实现导出Excel的多种方式
1. 原生JavaScript实现（CSV格式）
2. 使用SheetJS (xlsx)库
3. 使用exceljs库
4. 使用Export2Excel插件
5. 通过后端接口导出
选择建议
Vue实现导出Excel的多种方式
在Vue项目中实现Excel导出功能是常见的需求，根据知识库信息，以下是实现Excel导出的5种主要方法：
1. 原生JavaScript实现（CSV格式）
实现原理：将数据转换为CSV格式字符串，使用Blob对象创建文件，通过创建临时URL触发下载。
安装：无需额外安装依赖
代码示例：
export function exportToCSV(filename, rows) { const processRow = (row) => { return row.map(value => { if (value === null || value === undefined) return '' value = String(value) value = value.replace(/"/g, '""') if (value.search(/[,"]/g) >= 0) { value = `"${value}"` } return value }).join(',') } let csvContent = '' if (rows.length > 0) { csvContent += processRow(Object.keys(rows[0])) + '\r\n' rows.forEach(row => { csvContent += processRow(Object.values(row)) + '\r\n' }) } const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' }) const link = document.createElement('a') const url = URL.createObjectURL(blob) link.setAttribute('href', url) link.setAttribute('download', filename) link.style.visibility = 'hidden' document.body.appendChild(link) link.click() document.body.removeChild(link) } // Vue组件中使用 methods: { exportData() { const data = [ { id: 1, name: '张三', age: 25 }, { id: 2, name: '李四', age: 30 } ] exportToCSV('用户数据.csv', data) } }优点：无需额外依赖，简单轻量缺点：只能导出CSV格式，功能有限
2. 使用SheetJS (xlsx)库
安装：
npm install xlsx file-saver --save代码示例：
import XLSX from 'xlsx' import { saveAs } from 'file-saver' export default { methods: { exportToExcel() { // 准备数据 const data = [ { name: "John Doe", email: "john@example.com", age: 30 }, { name: "Jane Smith", email: "jane@example.com", age: 25 } ] // 转换为工作表 const ws = XLSX.utils.json_to_sheet(data) // 设置列宽 ws['!cols'] = [ { wch: 20 }, { wch: 30 }, { wch: 10 } ] // 创建工作簿 const wb = XLSX.utils.book_new() XLSX.utils.book_append_sheet(wb, ws, "Users") // 触发下载 XLSX.writeFile(wb, "Users.xlsx") } } }优点：功能强大，支持Excel格式，可自定义样式缺点：需要引入两个依赖库
3. 使用exceljs库
安装：
npm install exceljs代码示例：
import ExcelJS from 'exceljs' export default { methods: { async exportToExcel() { const workbook = new ExcelJS.Workbook(); const worksheet = workbook.addWorksheet('My Sheet'); // 设置列标题 worksheet.columns = [ { header: "身份证号", key: "id", width: 10}, { header: "姓名", key: "name", width: 10 }, { header: "日期", key: "date", width: 10 }, { header: "项目编号", key: "code", width: 10 } ]; // 添加数据 this.tableData.forEach(item => { worksheet.addRow(item) }); // 设置表头样式 const style = { font: { bold: true } }; worksheet.getRow(1).font = style.font; // 导出Excel文件 const fileName = 'XXX文件.xlsx'; const buffer = await workbook.xlsx.writeBuffer(); const blob = new Blob([buffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' }); saveAs(blob, fileName); } } }优点：API清晰，支持复杂样式和多Sheet缺点：对大数据量处理性能稍差
4. 使用Export2Excel插件
安装：
npm install file-saver script-loader --save使用步骤：
- 将插件文件放入项目目录
- 在Vue组件中引入
代码示例：
import('@/vendor/Export2Excel').then(excel => { excel.export_json_to_excel({ header: ['姓名', '工资'], data: [ ['刘备', 100], ['关羽', 500] ], filename: 'excel-list', autoWidth: true, bookType: 'xlsx' }) })优点：简单易用，适合快速实现缺点：需要额外处理数据格式
5. 通过后端接口导出
实现方式：前端发送请求到后端接口，后端生成Excel文件并返回URL
代码示例：
export default { methods: { exportToExcel() { this.$http.get('/api/export-excel').then(response => { let url = response.data.url; window.location.href = url; }); } } }优点：适合大数据量导出，减轻前端压力缺点：需要后端支持，增加服务器负担
选择建议
- 简单需求：使用原生JavaScript实现CSV导出
- 常规需求：使用SheetJS (xlsx)库
- 复杂样式需求：使用exceljs库
- 快速实现：使用Export2Excel插件
- 大数据量：通过后端接口导出
以上方法涵盖了Vue项目中实现Excel导出的主流方式，根据项目需求和数据量大小选择合适的方法即可。
❤️❤️❤️本人水平有限，如有纰漏，欢迎各位大佬评论批评指正！😄😄😄
💘💘💘如果觉得这篇文对你有帮助的话，也请给个点赞、收藏下吧，非常感谢!👍 👍 👍
🔥🔥🔥Stay Hungry Stay Foolish 道阻且长,行则将至,让我们一起加油吧！🌙🌙🌙
)