<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body> <button id="btn">下载</button> <!-- 这个文件必须要引用, 不然下载下来的xlsx不能用 --> <script src="./xlsx.core.min.js"></script> <script src="./xlsx.js"></script> <!-- 我一般下载这两个文件是直接新建一个文件夹, 在文件夹中打开cmd黑窗口 --> <!-- 在黑窗口中 npm init -y 初始化一个package.json文件 --> <!-- 然后 npm i xlsx 安装包, 安装完后去 node_modules 中找对应的文件即可 --> <script> const btn = document.querySelector("#btn"); btn.addEventListener("click", (ev) => { // 假设这个是数据源 一般是直接拉服务器上的数据, 进行下载 const data = [ { id: 1, name: "张三", age: 10 }, { id: 2, name: "张珊", age: 10 }, { id: 3, name: "李四", age: 10 }, ]; // 展示名称 const headerReplace = { id: "ID", name: "名称", age: "年龄" }; // 数据源 const sheet = [headerReplace, ...data]; // 创建一个sheet表格 使用json_to_sheet, 数据格式比较为 数组包对象, 不然会报错 const worksheet = XLSX.utils.json_to_sheet(sheet, { // 这里可以通过设置header, 来对导出数据 列 顺序的排序 // 实测可以只写一部分, 也可以整体排序 // ["id", "name", "age"] 相当于把上面整个表头给限制顺序了 header: ["age"], // 跳过 Header, 就是把原来表格数据的表头去掉了, headerReplace渲染的数据 "冒充" 表头了 skipHeader: true, }); // 简单理解为在内存中 创建一个xlsx 文件 const newWorkBook = XLSX.utils.book_new(); // 把worksheet添加到workbook中 XLSX.utils.book_append_sheet(newWorkBook, worksheet, "SheetJS"); // 写入文件, CHROME浏览器会直接下载, 后面的是文件名称和后缀 XLSX.writeFile(newWorkBook, "订单.xlsx"); }); </script> </body> </html>
//=======================================================================================================================>
如果导出的内容的每一项都是 数组, 例如
表头 = ["id", "姓名", "年龄"]
内容 = [ [1, "张三", 18], [2, "李四", 20 ] ]
直接把上面的 json_to_sheet 替换成 aoa_to_sheet 就能正常导出了
//=========================================================================================================================>