<!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 就能正常導出了
//=========================================================================================================================>