JavaScript实现导出包含单个或多个sheet的Excel文件-网页技术-CodeUp Hub

在前端业务中，经常遇到点击导出数据的业务场景。一般我们直接可以用现成的js库去做。xlsx.js 就是一个功能强大的js库。可以使用它来完美解决我们的业务需求。

安装& 使用

可以使用npm 安装

npm i xlsx

或者使用yarn 安装

yarn add xlsx

使用的话使用require导入即可

const XLSX require('xlsx')

引入本地文件

导出单个sheet

这里使用的是本地文件

<!DOCTYPE html>
<html>
  <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>导出Excel</button>
  </body>
  <script src="./package/dist/xlsx.full.min.js"></script>
  <script>
    const btn = document.querySelector('button')
    /**
     *
     * @param sheetData 数组表格数据
     * @param fileName 文件名
     */
    function exportFile(sheetData, fileName) {
      // 将由对象组成的数组转化成sheet
      const sheet = XLSX.utils.json_to_sheet(sheetData)
      // 创建虚拟的workbook
      const wb = XLSX.utils.book_new()
      // 把sheet添加到workbook中
      XLSX.utils.book_append_sheet(wb, sheet)
      XLSX.writeFile(wb, `${fileName}.xls`)
    }
    btn.onclick = function () {
      const table_data = [
        {
          name: '张三',
          age: 18,
          sex: '男',
        },
        {
          name: '李四',
          age: 20,
          sex: '女',
        },
      ]
      
      exportFile(table_data, '人员信息')
    }
  </script>
</html>

点击导出Excel按钮，即可下载excel文件

JavaScript实现导出包含单个或多个sheet的Excel文件

导出多个sheet

我们看到XLSX.utils.book_append_sheet这个方法，append理解就是添加的意思，所以可以多次调用这个方法去添加sheet，这个方法的第三个参数是sheet的名字，不写默认是sheet1，sheet2...

<!DOCTYPE html>
<html>
  <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>导出Excel</button>
  </body>
  <script src="./package/dist/xlsx.full.min.js"></script>
  <script>
    const btn = document.querySelector('button')
    /**
     *
     * @param sheetData 数组表格数据
     * @param fileName 文件名
     */
    function exportFile2(sheetData, fileName) {
      let workbookBlob
      // 创建虚拟的workbook
      let wb = XLSX.utils.book_new()
      for (let i = 0; i < sheetData.length; i++) {
        const item = sheetData[i]
        // 将由对象组成的数组转化成sheet
        const sheet = XLSX.utils.json_to_sheet(item.data)

        // 把sheet添加到workbook中
        XLSX.utils.book_append_sheet(wb, sheet, item.sheet)
      }
      XLSX.writeFile(wb, `${fileName}.xlsx`)
    }
    btn.onclick = function () {
      const table_data2 = [
        {
          data: [
            {
              name: '张三',
              age: 18,
              sex: '男',
            },
            {
              name: '李四',
              age: 20,
              sex: '女',
            },
          ],
          sheet: '中国',
        },
        {
          data: [
            {
              name: 'tom',
              age: 18,
              sex: '男',
            },
            {
              name: 'mary',
              age: 20,
              sex: '女',
            },
          ],
          sheet: '外国',
        },
      ]
      exportFile2(table_data2, '人员信息')
    }
  </script>
</html>

导出的Excel格式如下

JavaScript实现导出包含单个或多个sheet的Excel文件