两种方式实现表格的下载

• csv：按一定格式排列文本输出，可用excel查看
• xlsx：常规excel表格，可实现多表

csv

按以下规则排列文本：

1. 在文本开头标识格式：

  // 乱码问题
  // 在文件最前面加入BOM(Byte order)。如果接收者收到以EF BB BF开头的字节流，就知道这是UTF-8编码了。
  const table = '\uFEFF'

2. 行与行之间使用\n分割，单元格与单元格之间使用,分割
3. 若单元格内容中包含,，则使用双引号将内容包裹起来，若内容中还有双引号则进行转义：text.replace(/"/g, '""')

  if (value.includes(',')) {
    if (value.includes('"')) {
      value = value.replace(/"/g, '""');
    }
    value = `"${value}"`;
  }

操作步骤：

// 1. 生成表格文本：
const header = ['name','age'].map(cellFormat)
const data = ['jielun',20].map(cellFormat)
let table = `\uFEFF`
table+=header.join(',')
table+='\n'
table+=data.join(',')

// 2. 触发下载
downloadBlobData(table,'table.csv','text/csv')

xlsx

使用xlsx模块实现：

1. 安装依赖

npm install xlsx --save

2. 生成 sheet

// 引入
import {utils,write} from "xlsx" 

// 源数据
const data = [
  {
    id:1,
    name:'hon',
    phone:138,
    time:'today'
  },
  {
    id:2,
    name:'don',
    phone:137,
    time:'yestoday'
  }
]

// sheet
const sheetData = data.map(item=>{
  return {
    ID:item.id,
    "名称":item.name,
    "手机":item.phone,
    "时间":item.time
  }
})
const sheet = utils.json_to_sheet(sheetData);

// 生成一个工作簿
const wb = utils.book_new(); 

// 将 sheet 添加到工作簿
utils.book_append_sheet(wb, sheet, '名单信息');

// 将工作簿转化为二进制
const workbookBlob = workbook2blob(wb);

// 导出
downloadBlobData(workbookBlob, '收件人列表.xlsx', "application/octet-stream");

相关方法：

// 将workbook装化成blob对象
function workbook2blob(workbook) {
  // 生成excel的配置项
  var wopts = {
    // 要生成的文件类型
    bookType: "xlsx",
    // 是否生成Shared String Table，官方解释是，如果开启生成速度会下降，但在低版本IOS设备上有更好的兼容性
    bookSST: false,
    type: "binary"
  };
  
  // 将字符串转ArrayBuffer
  var wbout = write(workbook, wopts);
  var buf = new ArrayBuffer(wbout.length);
  var view = new Uint8Array(buf);
  for (var i = 0; i != wbout.length; ++i) view[i] = wbout.charCodeAt(i) & 0xff;

  return buf;
}


// 下载数据
const downloadBlobData = function(data, fileName, contentType) {
    var blob = new Blob([data], { type: contentType })
    var downloadElement = document.createElement('a')
    var href = window.URL.createObjectURL(blob) // 创建下载的链接
    downloadElement.href = href
    downloadElement.download = fileName // 下载后文件名
    document.body.appendChild(downloadElement)
    downloadElement.click() // 点击下载
    document.body.removeChild(downloadElement) // 下载完成移除元素
    window.URL.revokeObjectURL(href) // 释放掉blob对象
}

// 单元格格式化
const cellFormat = cell => {
  let formatCell = cell
  if (typeof cell === "string" && cell.includes(',')) {
    if (cell.includes('"')) {
      formatCell = cell.replace(/"/g, '""');
    }
    formatCell = `"${cell}"`;
  }
  return formatCell
}