企业官网建设流程全解析

品牌营销网站建设,华为开发者联盟,网站的建设和维护的钱,无极领域网站Vue.js 本身不提供直接导出 Excel 的功能#xff0c;但可以通过以下几种方式实现#xff1a; 1. 前端导出方案 使用 xlsx 库#xff08;推荐#xff09; npm install xlsx # 或 yarn add xlsx templatebutton clickexportExcel导出Excel但可以通过以下几种方式实现1.前端导出方案使用 xlsx 库推荐npm install xlsx # 或 yarn add xlsxtemplate button clickexportExcel导出Excel/button /template script import * as XLSX from xlsx; export default { data() { return { tableData: [ { name: 张三, age: 25, city: 北京 }, { name: 李四, age: 30, city: 上海 } ] } }, methods: { exportExcel() { // 创建工作簿 const wb XLSX.utils.book_new(); // 创建工作表 const ws XLSX.utils.json_to_sheet(this.tableData); // 将工作表添加到工作簿 XLSX.utils.book_append_sheet(wb, ws, Sheet1); // 导出文件 XLSX.writeFile(wb, 用户数据.xlsx); } } } /script使用 exceljs功能更强大npm install exceljs npm install file-saverimport ExcelJS from exceljs; import { saveAs } from file-saver; async exportExcel() { const workbook new ExcelJS.Workbook(); const worksheet workbook.addWorksheet(Sheet1); // 添加表头 worksheet.columns [ { header: 姓名, key: name }, { header: 年龄, key: age }, { header: 城市, key: city } ]; // 添加数据 this.tableData.forEach(item { worksheet.addRow(item); }); // 保存文件 const buffer await workbook.xlsx.writeBuffer(); const blob new Blob([buffer], { type: application/vnd.openxmlformats-officedocument.spreadsheetml.sheet }); saveAs(blob, 用户数据.xlsx); }2.使用现成组件vue-json-excelnpm install vue-json-exceltemplate download-excel :datatableData :fieldsjsonFields name用户数据.xlsx button导出Excel/button /download-excel /template script import JsonExcel from vue-json-excel; export default { components: { download-excel: JsonExcel }, data() { return { tableData: [...], jsonFields: { 姓名: name, 年龄: age, 城市: city } } } } /script3.后端生成方案如果数据量大或需要复杂格式建议后端生成// 前端调用 exportExcel() { axios({ url: /api/export/excel, method: GET, responseType: blob // 重要接收文件流 }).then(response { const blob new Blob([response.data], { type: application/vnd.openxmlformats-officedocument.spreadsheetml.sheet }); const url window.URL.createObjectURL(blob); const link document.createElement(a); link.href url; link.download data.xlsx; link.click(); window.URL.revokeObjectURL(url); }); }4.简单表格导出exportTable() { const table document.querySelector(#your-table); const wb XLSX.utils.table_to_book(table); XLSX.writeFile(wb, 表格数据.xlsx); }注意事项数据量大时建议使用后端导出避免浏览器内存溢出格式化处理日期、数字等特殊格式需要转换样式需求如需复杂样式建议使用 exceljs兼容性xlsx 库兼容性较好支持多种格式推荐方案简单场景使用 xlsx 库需要样式和复杂功能使用 exceljs大数据量后端生成