如何使用JavaScript实现纯前端读取和导出excel文件

由SheetJS出品的js-xlsx是一款非常方便的只需要纯JS即可读取和导出excel的工具库，功能强大，支持格式众多，支持xls、xlsx、ods(一种OpenOffice专有表格文件格式)等十几种格式。本文全部都是以xlsx格式为例。

读取excel

读取excel主要是通过XLSX.read(data, {type: type});方法来实现，返回一个叫WorkBook的对象，type主要取值如下：

  • base64: 以base64方式读取；
  • binary: BinaryString格式(byte n is data.charCodeAt(n))
  • string: UTF8编码的字符串；
  • buffer: nodejs Buffer；
  • array: Uint8Array，8位无符号数组；
  • file: 文件的路径（仅nodejs下支持）；

获取workbook对象

读取本地文件

// 读取本地excel文件
function readWorkbookFromLocalFile(file, callback) {
    var reader = new FileReader();
    reader.onload = function(e) {
        var data = e.target.result;
        var workbook = XLSX.read(data, {type: 'binary'});
        if(callback) callback(workbook);
    };
    reader.readAsBinaryString(file);
}

读取网络文件

// 从网络上读取某个excel文件，url必须同域，否则报错
function readWorkbookFromRemoteFile(url, callback) {
    var xhr = new XMLHttpRequest();
    xhr.open('get', url, true);
    xhr.responseType = 'arraybuffer';
    xhr.onload = function(e) {
        if(xhr.status == 200) {
            var data = new Uint8Array(xhr.response)
            var workbook = XLSX.read(data, {type: 'array'});
            if(callback) callback(workbook);
        }
    };
    xhr.send();
}

详解 workbook

workbook里面有什么东西呢，我们打印出来看一下：

可以看到，SheetNames里面保存了所有的sheet名字，然后Sheets则保存了每个sheet的具体内容（我们称之为Sheet Object）。每一个sheet是通过类似A1这样的键值保存每个单元格的内容，我们称之为单元格对象（Cell Object）：

Sheet Object

每一个Sheet Object表示一张表格，只要不是!开头的都表示普通cell，否则，表示一些特殊含义，具体如下：

  • sheet['!ref']：表示所有单元格的范围，例如从A1到F8则记录为A1:F8；
  • sheet[!merges]：存放一些单元格合并信息，是一个数组，每个数组由包含s和e构成的对象组成，s表示开始，e表示结束，r表示行，c表示列；
  • 等等；

关于单元格合并，看懂下面这张图基本上就没问题了：

结果如下：

img

单元格对象

每一个单元格是一个对象（Cell Object），主要有t、v、r、h、w等字段（详见这里）：

  • t：表示内容类型，s表示string类型，n表示number类型，b表示boolean类型，d表示date类型，等等
  • v：表示原始值；
  • f：表示公式，如B2+B3；
  • h：HTML内容
  • w：格式化后的内容
  • r：富文本内容rich text
  • 等等

读取workbook

普通方法：

// 读取 excel文件
function outputWorkbook(workbook) {
    var sheetNames = workbook.SheetNames; // 工作表名称集合
    sheetNames.forEach(name => {
        var worksheet = workbook.Sheets[name]; // 只能通过工作表名称来获取指定工作表
        for(var key in worksheet) {
            // v是读取单元格的原始值
            console.log(key, key[0] === '!' ? worksheet[key] : worksheet[key].v);
        }
    });
}

根据!ref确定excel的范围，再根据!merges确定单元格合并（如果有），最后输出整个table，比较麻烦，幸运的是，插件自身已经写好工具类XLSX.utils给我们直接使用，无需我们自己遍历，工具类输出主要包括如下：

  • XLSX.utils.sheet_to_csv：生成CSV格式
  • XLSX.utils.sheet_to_txt：生成纯文本格式
  • XLSX.utils.sheet_to_html：生成HTML格式
  • XLSX.utils.sheet_to_json：输出JSON格式

常用的主要是sheet_to_csv或者sheet_to_html，转csv的话会忽略格式、单元格合并等信息，所以复杂表格可能不适用。转html的话会保留单元格合并，但是生成的是<html></html>代码，而不是<table></table>，需要对表格进行一些定制时不太方便，所以具体还是要视情况来采用合适的工具类。

这里写一个采用转csv方式输出结果的简单示例，可点击这里查看在线DEMO：

function readWorkbook(workbook)
{
    var sheetNames = workbook.SheetNames; // 工作表名称集合
    var worksheet = workbook.Sheets[sheetNames[0]]; // 这里我们只读取第一张sheet
    var csv = XLSX.utils.sheet_to_csv(worksheet);
    document.getElementById('result').innerHTML = csv2table(csv);
}

// 将csv转换成简单的表格，会忽略单元格合并，在第一行和第一列追加类似excel的索引
function csv2table(csv)
{
    var html = '<table>';
    var rows = csv.split('\n');
    rows.pop(); // 最后一行没用的
    rows.forEach(function(row, idx) {
        var columns = row.split(',');
        columns.unshift(idx+1); // 添加行索引
        if(idx == 0) { // 添加列索引
            html += '<tr>';
            for(var i=0; i<columns.length; i++) {
                html += '<th>' + (i==0?'':String.fromCharCode(65+i-1)) + '</th>';
            }
            html += '</tr>';
        }
        html += '<tr>';
        columns.forEach(function(column) {
            html += '<td>'+column+'</td>';
        });
        html += '</tr>';
    });
    html += '</table>';
    return html;
}

导出excel

  • aoa_to_sheet: 这个工具类最强大也最实用了，将一个二维数组转成sheet，会自动处理number、string、boolean、date等类型数据；
  • table_to_sheet: 将一个table dom直接转成sheet，会自动识别colspan和rowspan并将其转成对应的单元格合并；
  • json_to_sheet: 将一个由对象组成的数组转成sheet；

aoa_to_sheet示例：

var aoa = [
    ['姓名', '性别', '年龄', '注册时间'],
    ['张三', '男', 18, new Date()],
    ['李四', '女', 22, new Date()]
];
var sheet = XLSX.utils.aoa_to_sheet(aoa);
openDownloadDialog(sheet2blob(sheet), '导出.xlsx');

一般来说，前端生成excel而不是csv最主要目的都是为了解决csv不能实现单元格合并的问题，要不然直接导出csv文件就好了，何必引入几百kb的插件。

假设我们要生成如下格式的excel文件，其中A1-C1进行单元格合并：

代码如下：

var aoa = [
    ['主要信息', null, null, '其它信息'], // 特别注意合并的地方后面预留2个null
    ['姓名', '性别', '年龄', '注册时间'],
    ['张三', '男', 18, new Date()],
    ['李四', '女', 22, new Date()]
];
var sheet = XLSX.utils.aoa_to_sheet(aoa);
sheet['!merges'] = [
    // 设置A1-C1的单元格合并
    {s: {r: 0, c: 0}, e: {r: 0, c: 2}}
];
openDownloadDialog(sheet2blob(sheet), '单元格合并示例.xlsx');

需要注意的地方就是被合并的单元格要用null预留出位置，否则后面的内容（本例中是第四列其它信息）会被覆盖。

封装后的工具函数

/**
 * @Version
 * @Author ZhenYuTsai
 * @Descripttion 用于Excel 文件的导入导出
 * @Date 2021-10-09 09:55:49
 * @LastEditors ZhenYuTsai
 * @依赖 npm install xlsx file-saver script-loader -S
 */

import XLSX from 'xlsx'

/**
 * @author ZhenYuTsai
 * @description 导入Excel
 * @return {Promise} 表格JSON数据
 * @lastEditors ZhenYuTsai
 * @param {Object} rawFile Excel文件对象
 */
export function getExcelData (rawFile) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader()
    reader.onload = e => {
      const data = e.target.result
      const workbook = XLSX.read(data, { type: 'array' })
      const firstSheetName = workbook.SheetNames[0]
      const worksheet = workbook.Sheets[firstSheetName]
      const header = getHeaderRow(worksheet)
      const results = XLSX.utils.sheet_to_json(worksheet)
      resolve({ header, results })
    }
    reader.readAsArrayBuffer(rawFile)
  })
}

function getHeaderRow (sheet) {
  const headers = []
  const range = XLSX.utils.decode_range(sheet['!ref'])
  let C
  const R = range.s.r
  /* start in the first row */
  for (C = range.s.c; C <= range.e.c; ++C) { /* walk every column in the range */
    const cell = sheet[XLSX.utils.encode_cell({ c: C, r: R })]
    /* find the cell in the first row */
    let hdr = 'UNKNOWN ' + C // <-- replace with your desired default
    if (cell && cell.t) hdr = XLSX.utils.format_cell(cell)
    headers.push(hdr)
  }
  return headers
}

/**
 * @author ZhenYuTsai
 * @description 导入Excel
 * @return {String} Html
 * @lastEditors ZhenYuTsai
 * @param {Object} rawFile Excel文件对象
 */
export function getExcelHtml (rawFile) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader()
    reader.onload = e => {
      const data = e.target.result
      const workbook = XLSX.read(data, { type: 'array' })
      const firstSheetName = workbook.SheetNames[0]
      const worksheet = workbook.Sheets[firstSheetName]
      const dom = XLSX.utils.sheet_to_html(worksheet)
      resolve(dom)
    }
    reader.readAsArrayBuffer(rawFile)
  })
}

/**
 * @author ZhenYuTsai
 * @description 导入Excel
 * @return {String} Table的Dom
 * @lastEditors ZhenYuTsai
 * @param {Object} rawFile Excel文件对象
 */
export function getExcelTable (rawFile) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader()
    reader.onload = e => {
      const data = e.target.result
      const workbook = XLSX.read(data, { type: 'array' })
      const firstSheetName = workbook.SheetNames[0]
      const worksheet = workbook.Sheets[firstSheetName]
      const csv = XLSX.utils.sheet_to_csv(worksheet)
      const dom = csv2table(csv)
      resolve(dom)
    }
    reader.readAsArrayBuffer(rawFile)
  })
}

function csv2table (csv) {
  let html = '<table id="excel-table" border="1" cellspacing="0" >'
  const rows = csv.split('\n')
  rows.pop() // 最后一行没用的
  rows.forEach(function (row, idx) {
    const columns = row.split(',')
    columns.unshift(idx + 1) // 添加行索引
    if (idx === 0) { // 添加列索引
      html += '<tr>'
      for (let i = 0; i < columns.length; i++) {
        html += '<th>' + (i === 0 ? '' : String.fromCharCode(65 + i - 1)) + '</th>'
      }
      html += '</tr>'
    }
    html += '<tr>'
    columns.forEach(function (column) {
      html += '<td>' + column + '</td>'
    })
    html += '</tr>'
  })
  html += '</table>'
  return html
}

/**
 * @author ZhenYuTsai
 * @description 导出Excel二维数组转成sheet
 * @lastEditors ZhenYuTsai
 * @param {Array} header 表头
 * @param {Array} data 二维数组
 * @param {String} filename 导出文件名
 */
export function exportExcelArray ({ header, data, filename }) {
  filename = filename || '导出.xlsx'
  const aoa = [
    header,
    ...data
  ]
  const sheet = XLSX.utils.aoa_to_sheet(aoa)
  const blob = sheet2blob(sheet, 'sheet')
  openDownloadXLSX(blob, filename)
  console.log(sheet)
}

/**
 * @author ZhenYuTsai
 * @description 导出Excel对象组成的数组转成sheet
 * @lastEditors ZhenYuTsai
 * @param {Array} data 对象数组
 * @param {String} filename 导出文件名
 */
export function exportExcelJson ({ data, filename }) {
  filename = filename || '导出.xlsx'
  const sheet = XLSX.utils.json_to_sheet(data)
  const blob = sheet2blob(sheet, 'sheet')
  openDownloadXLSX(blob, filename)
  console.log(sheet)
}

/**
 * @author ZhenYuTsai
 * @description 导出ExceltableDom
 * @lastEditors ZhenYuTsai
 * @param {Array} dom tableDom
 * @param {String} filename 导出文件名
 */
export function exportExcelTableDom ({ dom, filename }) {
  filename = filename || '导出.xlsx'
  const sheet = XLSX.utils.table_to_sheet(dom)
  const blob = sheet2blob(sheet, 'sheet')
  openDownloadXLSX(blob, filename)
  console.log(sheet)
}

function sheet2blob (sheet, sheetName) {
  sheetName = sheetName || 'sheet1'
  const workbook = {
    SheetNames: [sheetName],
    Sheets: {}
  }
  workbook.Sheets[sheetName] = sheet
  // 生成excel的配置项
  const wopts = {
    bookType: 'xlsx', // 要生成的文件类型
    bookSST: false, // 是否生成Shared String Table，官方解释是，如果开启生成速度会下降，但在低版本IOS设备上有更好的兼容性
    type: 'binary'
  }
  const wbout = XLSX.write(workbook, wopts)
  const blob = new Blob([s2ab(wbout)], { type: 'application/octet-stream' })
  // 字符串转ArrayBuffer
  function s2ab (s) {
    const buf = new ArrayBuffer(s.length)
    const view = new Uint8Array(buf)
    for (let i = 0; i !== s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF
    return buf
  }
  return blob
}

function openDownloadXLSX (url, saveName) {
  if (typeof url === 'object' && url instanceof Blob) {
    url = URL.createObjectURL(url) // 创建blob地址
  }
  const DownloadLink = document.createElement('a')
  DownloadLink.style = 'display: none' // 创建一个隐藏的a标签
  DownloadLink.download = saveName || ''
  DownloadLink.href = url
  document.body.appendChild(DownloadLink)
  DownloadLink.click() // 触发a标签的click事件
  document.body.removeChild(DownloadLink)
}