- 下载依赖
npm i xlsx
- 目录下创建utils文件夹
- 方法
import * as XLSX from "xlsx"; /** *导出Excel * @param {Object} json 服务端发过来的数据 * @param {String} name 导出Excel文件名字 * @param {String} titleArr 导出Excel表头 * @param {String} sheetName 导出sheetName名字 */ export function $exportExcel(json, name, titleArr, sheetName) { console.log(json); /* convert state to workbook */ var data = new Array(); var keyArray = new Array(); const getLength = function (obj) { var count = 0; for (var i in obj) { if (obj.hasOwnProperty(i)) { count++; } } return count; }; for (const key1 in json) { if (json.hasOwnProperty(key1)) { const element = json[key1]; var rowDataArray = new Array(); for (const key2 in element) { if (element.hasOwnProperty(key2)) { const element2 = element[key2]; rowDataArray.push(element2); if (keyArray.length < getLength(element)) { keyArray.push(key2); } } } data.push(rowDataArray); } } // keyArray为英文字段表头 data.splice(0, 0, keyArray, titleArr); const ws = XLSX.utils.aoa_to_sheet(data); const wb = XLSX.utils.book_new(); // 此处隐藏英文字段表头 var wsrows = [{ hidden: true }]; ws["!rows"] = wsrows; // ws - worksheet XLSX.utils.book_append_sheet(wb, ws, sheetName); /* generate file and send to client */ XLSX.writeFile(wb, name + ".xlsx"); }
sheetName 名字就是打开后下方的名字
- 引入方法
import { $exportExcel } from "@/utils/index.js";
- 调用
exportExcel() { let arr=[{id: 1,title: "测试导出",num: "1123",sex: "男"},] const titleArr = ["id", "标题", "数据", "性别"]; //表头中文名 let xlsxArr = arr.map((item) => { return { id: item.id, title: item.title, num: item.num, sex: item.sex, }; }); $exportExcel(xlsxArr, "测试导出", titleArr, "sheetName"); },
vue导出xlsx文件
最新推荐文章于 2024-10-18 15:58:53 发布