js-xlsx實現文件導出、下載（excel）

時間 2019-12-08

標籤 xlsx 實現文件導出下載 excel 欄目 JavaScript 简体版

原文原文鏈接

記錄一下近期使用js-xlsx的一些經驗html

真正的.xls\.xlsx文件，就算是空白的實際上是包含了一些內容的vue

因此並不能直接像寫入txt同樣直接搞一個file往裏面把數據寫入就完了git

如今網上查獲得導出excel的一些方法：github

一、在IE上使用ActiveXObject導出文件

因爲咱們客戶端是基於chorme的，因此沒有作嘗試npm

二、導出csv文件

若是是比較簡單的表格（沒有表格單元格合併等需求），其實csv文件也是一個不錯的選擇（固然前提是你不介意這個文件是csv文件）。需求比較介意，因此沒有對csv進行嘗試json

三、導出僞.xls\.xlsx文件

①對html代碼進行格式化，最後生成一串uri文件連接，再經過<a>標籤進行下載

      // let uri = 'data:application/vnd.ms-excel;base64,'
      // let template = 
      //   '<html xmlns:o="urn:schemas-microsoft-com:office:office" ' +
      //   'xmlns:x="urn:schemas-microsoft-com:office:excel" ' +
      //   'xmlns="http://www.w3.org/TR/REC-html40"><head>' +
      //   '<!--[if gte mso 9]><xml><x:ExcelWorkbook>' +
      //   '<x:ExcelWorksheets><x:ExcelWorksheet><x:Name>{worksheet}' +
      //   '</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions>' +
      //   '</x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml>' +
      //   '<![endif]--></head><body><table>{table}</table></body></html>'
      // let base64 = (s: any) => { 
      //   return window.btoa(unescape(encodeURIComponent(s))) 
      // }
      // let format = (s: any, c: any) => {
      //   return s.replace(/{(\w+)}/g, (m: any, p: any) => {
      //     return c[p]
      //   })
      // }
      // let tableHTML = table[0].innerHTML + table[1].innerHTML
      // let ctx = {
      //   worksheet: '統計',
      //   table: tableHTML.replace(/<(img).*?>/g, '')   // 篩選掉<img>
      // }
      // let downloadLink = document.createElement('a')
      // downloadLink.href = uri + base64(format(template, ctx))
      // downloadLink.download = '成績統計.xls'
      // downloadLink.click()

這種大概能夠保留行內樣式，好比字體顏色、字體粗細等，可是對單元格格式進行控制（有些全數字的字符串過長會被識別成科學計數法），網上不少說能夠用style="mso-number-format:\\@;"，嘗試了以後並不可行數組

②固然還有一種是能夠不用對html進行格式化

由於excel能夠識別html代碼，能夠跳過方法①中對html進行格式化的步驟，直接將html導出app

<html>
    <head>
        <meta charset="utf-8"/>　　//避免中文亂碼
    </head>
    <body>
        <table>
            <tr>
                <th>標題1</th>
                <th>標題2</th>
                <th>標題3</th>
                <th>標題4</th>
            </tr>
            <tr>
                <td>內容1</td>
                <td>內容2</td>
                <td>內容3</td>
                <td>內容4</td>
            </tr>
        </table>
    </body>
</html>

excel也能夠展現出來效果，可是打開以前會提示文件格式和擴展名不匹配，也就是說，這只是一個披着.xls擴展名的html文件，因此它連基本的單元格邊框都沒有，除非你在table裏寫上border="1"框架

③另外還有一種，更簡單，直接

以上三種方法生成的全是僞xls，由於他們沒有excel文件裏那7kb內容，因此就算拓展名改爲.xls\.xlsx，也只是一個假的文件字體

四、使用js-xlsx庫，實現真正的.xls\.xlsx導出

參考https://github.com/SheetJS/js-xlsx

①安裝

npm install xlsx

或者

bower install js-xlsx

②導入

官方github上有給各類框架的demo：

能夠根據項目框架選擇導入方式，這裏是vue：

import XLSX from 'xlsx'

③使用

      let workbook = XLSX.utils.table_to_book(wholeTable)
      let xls = XLSX.write(workbook, {
        bookType: 'xls',  // 生成的文件格式
        bookSST: false,   // 是否生成Shared String Table，官方解釋是，若是開啓生成速度會降低，但在低版本IOS設備上有更好的兼容性
        type: 'base64',   // 編碼方式
      })

這裏xlsx提供了多種方法：

寫入：