前端将json数据导出为excel

网上找了几种方法，

1、导出为xls文件，高版本的excel打开会提示类似兼容问题

下面文档可以参考，实测可用

https://blog.csdn.net/qq_34623560/article/details/79928248

 

2、导出为xlsx文件，低版本的excel会打不开，但是考虑到2007的excel用的比较少了，所以选了这个文件格式

网上找到的几个帖子，内容都一样，代码都有点问题，导出文件只有列名，没有数据，而且rowLength感觉没什么用，我也去掉了，帖子如下（xls的没试，xlsx和csv都有问题）

https://blog.csdn.net/qq_35493664/article/details/88896638

 

3、我修改了一下，可以参考（csv格式的也可以参考我修改的地方进行修改，估计问题差不多）

jsonData就是json数据

import * as XLSX from 'xlsx'
// JSONData为导出的json数据,fileName为导出的文件名,title为导出的第一行标题,filter为过滤字段
export function JSONToExcelConvertor(JSONData, FileName, title, filter) {
  if (!JSONData) { return }
  // 转化json为object
  var arrData = typeof JSONData !== 'object' ? JSON.parse(JSONData) : JSONData
 
  var excel = '<table id="expoetTable">'
 
  // 设置表头
  var row = '<tr>'
  if (title) {
    // 使用标题项
    for (var i in title) {
      row += "<th align='center'>" + title[i] + '</th>' // 将标题新增到row中
    }
  } else {
    // 不使用标题项
    for (var i in arrData[0]) {
      row += "<th align='center'>" + i + '</th>'
    }
  }
 
  excel += row + '</tr>'
  // 设置数据
  for (var i = 0; i < arrData.length; i++) {
    if (i === arrData.length - 1) {
      var row = '<tr>'
    } else {
      var row = ''
    }
    for (var index in arrData[i]) {
      console.log('index', index)
      // 判断是否有过滤行
      if (filter) {
        var value = ''
        console.log('filter.indexOf(index)', filter.indexOf(index))
        if (filter.indexOf(index) === -1) { // 过滤掉符合关键字的数据
          var value = arrData[i][index] == null ? '' : arrData[i][index]
          row += '<td>' + value + '</td>'
        } 
      } else {
        // 不过滤的逻辑
        var value = arrData[i][index] == null ? '' : arrData[i][index]
        row += "<td align='center'>" + value + '</td>'
      } 
    }
    excel += row + '</tr>'
  }
 
  excel += '</table>'
  var objE = document.createElement('div') // 因为我们这里的数据是string格式的,但是js-xlsx需要dom格式,则先新建一个div然后把数据加入到innerHTML中,在传childNodes[0]即使dom格式的数据
  objE.innerHTML = excel
  var sheet = XLSX.utils.table_to_sheet(objE.childNodes[0], { raw: true })// 将一个table对象转换成一个sheet对象,raw为true的作用是把数字当成string,身份证不转换成科学计数法
  openDownloadDialog(sheet2blob(sheet, FileName), FileName + '.xlsx')
}
 
// 将一个sheet转成最终的excel文件的blob对象，然后利用URL.createObjectURL下载
function sheet2blob(sheet, sheetName) {
  sheetName = sheetName || 'sheet1' // 不存在sheetName时使用sheet1代替
  var workbook = {
    SheetNames: [sheetName],
    Sheets: {}
  }
  workbook.Sheets[sheetName] = sheet // 生成excel的配置项
  workbook.Sheets[sheetName]['!cols'] = [    //生成excel的列的宽度
                      { wch: 20 }, // 第一列
                      { wch: 40 }, // 第二列
                      { wch: 80 }  // 第三列
]
 
  var wopts = {
    bookType: 'xlsx', // 要生成的文件类型
    bookSST: false, // 是否生成Shared String Table，官方解释是，如果开启生成速度会下降，但在低版本IOS设备上有更好的兼容性
    type: 'binary' // 二进制格式
  }
  var wbout = XLSX.write(workbook, wopts)
  var blob = new Blob([s2ab(wbout)], {
    type: 'application/octet-stream'
  }) // 字符串转ArrayBuffer
  function s2ab(s) {
    var buf = new ArrayBuffer(s.length)
    var view = new Uint8Array(buf)
    for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF
    return buf
  }
  return blob
}
// 下载的方法
function openDownloadDialog(url, saveName) {
  if (typeof url === 'object' && url instanceof Blob) {
    url = URL.createObjectURL(url) // 创建blob地址
  }
  var aLink = document.createElement('a')
  aLink.href = url
  aLink.download = saveName || '' // HTML5新增的属性，指定保存文件名，可以不要后缀，注意，file:///模式下不会生效
  var event
  if (window.MouseEvent) event = new MouseEvent('click')
  else {
    event = document.createEvent('MouseEvents')
    event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null)
  }
  aLink.dispatchEvent(event)
}
 

 

我修改的部分主要是判断是否过滤的代码部分：

 

增加了一部分，定义文件的列的宽度的代码：