博客 / 詳情

返回

express中使用node-xlsx插件下載excel表格

node-xlsx是一個輕量級的excel插件,下載導出excel基本的功能這個插件都能實現,本文記錄一下express框架中使用node-xlsx插件下載excel表格的步驟。

情況一、讀取本地文件並返回前端excel流文件

這種情況適用於下載excel模板場景,畢竟模板是固定的內容,我們在代碼的文件夾中存放一個固定的excel模板,讀取並返回即可。
  • 第一步,肯定是要下載安裝這個插件npm i node-xlsx
  • 第二步,在對應代碼中引入這個插件const xlsx = require('node-xlsx')
  • 第三步,就是在對應的路由url中寫對應代碼,代碼如下:
// excel導出下載模板接口
route.get("/exportExcel", (req, res) => {

  // 首先,讀取本地excel模板文件,並解析成node-xlsx插件需要的數據格式,
  // (比如我的表格文件在代碼中的excel文件夾下)要引入fs文件模塊才能讀取哦
  const dataByParse = xlsx.parse(fs.readFileSync('./excel/統計模板.xlsx'));

  /* 
     打印出來的數據是一個數組,數組中的每一項(每一個對象)都是一個sheet數據,name屬性指定的是每一個sheet的名字
     data屬性是一個數組,數組中存放的是表格對應每個sheet的數據,data數組中的第一項是“表頭”的數據,也可以理解為是
     第一行的數據,後面的每一項就是對應每一行“表體”的數據,具體格式,後續也會舉例。
  */ 
  console.log("解析數據格式",dataByParse);

  // 最後一步,使用xlsx插件自帶的build方法將解析後的數據轉換成為excel表格(buffer形式的流文件)
  // 以流文件的形式返回給前端,前端接收解析下載即可
  res.send(xlsx.build(dataByParse))

})

node-xlsx需要的數據格式舉例子

比如這樣的數據格式,我們看一下數據結構

let excelData = [
    // 第一個sheet內容
    {
      name:"我是sheet1", // 給第一個sheet指名字 
      data:[  // 注意,這裏是一個二維數組
        ["姓名","年齡","家鄉","備註"], // 第一行
        ["孫悟空","500","花果山","人送外號鬥戰勝佛"], // 第二行
        ["豬八戒","88","高老莊","天蓬元帥"], // 第三行
      ]
    },
    // 第二個sheet內容
    {
      name:"我是sheet2", // 給第二個sheet指名字 
      data:[
        ["城市","國家","人口","經濟水平"], // 同上
        ["上海","中國","14億","越來越好"],
        ["倫敦","英國","7000萬","還行"],
        ["華盛頓","美國","3.4億","湊活"]
      ]
    }
  ]

上述數據格式對應效果圖


很顯然,數據結構和對應導出的excel結果都是對應的

情況二、根據前端傳遞參數,查詢mysql數據並返回前端流文件

這種情況適用於,一次性的表格文件下載。不會佔用後端磁盤文件。就是接收前端傳遞來的參數,然後把參數拼接sql語句。最終把數據結構組裝成node-xlsx插件需要的數據格式即可
// excel導出下載模板接口
route.post("/exportExcel", (req, res) => {
  // 假設我們mysql數據庫查詢得到了excelData這個數據結果
  let excelData = [
    // 第一個sheet內容
    {
      name: "我是sheet1", // 給第一個sheet指名字 
      data: [
        ["姓名", "年齡", "家鄉", "備註"], // 第一行
        ["孫悟空", "500", "花果山", "人送外號鬥戰勝佛"], // 第二行
        ["豬八戒", "88", "高老莊", "天蓬元帥"], // 第三行
      ]
    },
    // 第二個sheet內容
    {
      name: "我是sheet2", // 給第二個sheet指名字 
      data: [
        ["城市", "國家", "人口", "經濟水平"], // 同上
        ["上海", "中國", "14億", "越來越好"],
        ["倫敦", "英國", "7000萬", "還行"],
        ["華盛頓", "美國", "3.4億", "湊活"]
      ]
    }
  ]

  // excel表格內容配置單元格寬度
  let optionArr = { 
    // 指定sheet1相應寬度
    "!cols": [
      { wch: 15 },
      { wch: 15 },
      { wch: 10 },
      { wch: 50 },
    ],
    // 指定sheet2相應寬度
    "cols": [
      { wch: 15 },
      { wch: 15 },
      { wch: 10 },
      { wch: 50 },
    ],
  }

  // xlsx.build方法第二個參數接收的是單元格的配置參數
  res.send(xlsx.build(excelData,optionArr))
})

總結

本文記錄的主要是後端方面的代碼寫法,至於前端的下載excel表格的寫法和注意事項常見問題,可以參考我的另外一篇文章,傳送門如下:https://segmentfault.com/a/11...

最後附上npmjs官方網站的文檔實例介紹,更加齊全喲:https://www.npmjs.com/package...
user avatar yinzhixiaxue 頭像
1 位用戶收藏了這個故事!

發佈 評論

Some HTML is okay.