關於exceljs的數據有效性驗證踩坑記錄

最近公司的項目中，需要有下載 excel 模板的功能，這個模板需要在輸入時進行有效性判斷。我當時聽到需求時渾身一震，心想：這都是啥玩意啊 excel 輸入限制是啥啊？？？在詢問一番該功能的必要性之后，便開始了查看文檔之旅。

一開始，我先在npm上搜索熱門的 excel in js 模塊，發現了xlsx。看了xlsx的文檔，使用谷歌瀏覽器的查詢功能，查詢關鍵詞 data validation ，沒找到。又去谷歌了一番，發現 xlsx 的 pro 版具有這個功能，當然這玩意肯定不是免費的啦，遂查看別的模塊。一番查找，看到了 exceljs 模塊，查了查關鍵詞，發現這個模塊有數據驗證功能，又看了看 api 文檔，發現有中文版，瞬間心動了起來。

大致翻了一遍文檔后，就開工了。

要創建一個帶數據驗證的 excel 模板，需要以下步驟

1、引用 exceljs 模塊，之后實例化一個 exceljs.Workbook ，以下將其稱為 wb

2、向 wb 中添加一個 sheet ，以下將其稱為 ws

3、向 ws 中添加 columns 。其中 column 為一個對象數組，具體參數詳見注1

4、向 ws 的行添加數據驗證。其中 dataValidation 為一個對象，具體參數詳見注2

5、將 wb 轉換成buffer

6、引用 file-saver 模塊的 saveAs 方法，將 buffer 保存為文件

寫完以上代碼后，我下載了一個測試了一下，發現只有我設置的行具有數據驗證功能，其他行均沒有數據驗證，想了一想，沒想到好辦法，只想到使用 for 循環將盡可能多的行設置上數據驗證。谷歌一下，也沒搜到更好的方法，便使用 for 循環了。

以下是具體代碼

export const export2Excel = async ({
  columns = [
    // {
    //   header: '出生日期（必填）',
    //   key: 'birthday',
    //   width: 20,
    //   style: { numFmt: 'yyyy-mm-dd' },
    // },
  ],
  list = [
    // {
    //   column: 4,
    //   data: ['"12,321,31231"'],
    //   operator: 'lessThan',
    //   showInputMessage: true,
    //   promptTitle: '輸入提示標題',
    //   prompt: '輸入提示內容',
    //   type: 'list'
    // },
  ],
  filename = 'a',
}) => {
  const wb = new Workbook()
  const ws = wb.addWorksheet('tb')
  ws.columns = columns
  for (let row = 2; row < 5000; row++) {
    // const row = i + 2
    for (let j = 0; j < list.length; j++) {
      const element = list[j]
      ws.getCell(row, element.column).dataValidation = {
        type: element.type,
        operator: element.operator ? element.operator : undefined,
        showInputMessage: element.showInputMessage,
        promptTitle: element.showInputMessage ? element.promptTitle : undefined,
        prompt: element.showInputMessage ? element.prompt : undefined,
        showErrorMessage: true,
        formulae: element.data,
      }
    }
  }

  const buffer = await wb.xlsx.writeBuffer()
  saveAs(
    new Blob([buffer], {
      type: 'application/octet-stream',
    }),
    `${filename}.xlsx`,
  )
}

 

參考文獻：[1] exceljs中文文檔

注：

1、columns 的參數有：

　　header：表格標題，也就是 excel 第一行每列的具體內容

　　key：用於建立當前列索引

　　width：用於設置列寬

　　style：用於設置列的內容樣式，也可以設置內容格式，例如 numFmt 可以設置輸入的數字格式，具體格式參考 excel 的單元格格式設置--自定義格式

2、dataValidation 的參數：

　　type：數據驗證的類型，常用內容如下，其他詳見文檔

　　　　list：定義一組數據列表。

　　　　whole：該值必須是整數

　　　　textLength：該值可以是文本，但長度是受控的

　　　　date：該值必須是日期

　　operator：值的區間，常用內容如下，其他詳見文檔

　　　　between：值必須介於公式結果之間

　　　　equal：值必須等於公式結果

　　　　greaterThan：值必須大於公式結果

　　　　lessThanOrEqual：值必須小於或等於公式結果

　　formulae：指定有效值的列表，常用格式如下，其他詳見文檔

　　　　['"12,321,31231"']：當 type 為 list 時使用，另外可以使用 [$D$5:$G$5'] 

　　　　[5]：通常在 type 為文本長度、數字且 operator 為等於、不等於、大於、小於時使用

　　　　[1, 5]：通常在 type 為文本長度、數字且 operator 為 between、notBetween 時使用

　　　　[new Date()]：通常在 operator 為等於、不等於、大於、小於時使用

　　　　[new Date(2000,1,1), new Date()]：通常在 operator 為 between、notBetween 時使用

　　showInputMessage：是否顯示輸入提示，必須為布爾值，默認為false

　　prompTitle：輸入提示標題

　　promp：輸入提示內容

　　showErrorMessage：是否提示數據錯誤信息，必須為布爾值