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提供了多种方法：

写入：

aoa_to_sheet 将JS数组的数组（[ [...],[...],[...] ]）转换为工做表
json_to_sheet 将json对象数组转换为工做表
table_to_sheet 将DOM TABLE元素转换为工做表
sheet_add_aoa 将JS数据数组添加到现有工做表中
sheet_add_json 将json对象数组添加到现有工做表中

读取：

sheet_to_json 将工做表对象转换为JSON对象数组
sheet_to_csv 将工做表转换成csv
sheet_to_txt 生成UTF16格式的文本
sheet_to_html 生成HTML输出
sheet_to_formulae 生成公式列表（具备值回退）

单元格和单元格地址操做：

format_cell 生成单元格的文本值（使用数字格式）
encode_row / decode_row 在0索引行和1索引行之间转换
encode_col / decode_col 在0索引列和列名之间进行转换
encode_cell / decode_cell 转换单元格地址
encode_range / decode_range 转换细胞范围

能够说是肥肠强大了