vue JSON數據導出爲多個sheet表的excel文件

<!DOCTYPE html>
<html lang="en">
  <head></head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <script src="https://cdn.bootcss.com/xlsx/0.15.1/xlsx.full.min.js"></script>
  </head>
  <body>
    <script>
      // 數據
 let data = { '基本信息': [{name: '李四', sex: 'nan', age: 12}], '成績': [{class: '計算機', teacher: 'Mrs wang', score: 90}] }; let columnHeaders = { '基本信息': ['name', 'sex', 'age'], '成績': ['class', 'teacher', 'score']} outputXlsxFile( data, [{ wch: 50 }, { wch: 50 }, { wch: 10 }], "test-xlsx" ); function outputXlsxFile(data, wscols, xlsxName) { let sheetNames = []; let sheetsList = {}; const wb = XLSX.utils.book_new(); for (let key in data) { sheetNames.push(key); let columnHeader = columnHeaders[key] // 此處是每一個sheet的表頭
 let temp = transferData(data[key], columnHeader); sheetsList[key] = XLSX.utils.aoa_to_sheet(temp); sheetsList[key]["!cols"] = wscols; } wb["SheetNames"] = sheetNames; wb["Sheets"] = sheetsList; XLSX.writeFile(wb, xlsxName + ".xlsx"); } function transferData(data, columnHeader) { let content = []; content.push(columnHeader); data.forEach((item, index) => { let arr = []; columnHeader.map(column =>{ arr.push(item[column]); }) content.push(arr); }); return content; } </script>
  </body>
</html>

注意上面的引入必須是xlsx.full.min.js

<script src="https://cdn.bootcss.com/xlsx/0.15.1/xlsx.full.min.js"></script>

vue JSON數據導出爲 多個sheet表的excel文件

vue JSON數據導出爲多個sheet表的excel文件