欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

基于el-table的树形表格及js-xlsx实现下载excel功能(二)

程序员文章站 2024-03-20 16:27:04
...

这篇主要是利用xlsx下载表格,网上参考的资料挺多的

安装xlsx

xlsx npm

我用到的也就前三个
基于el-table的树形表格及js-xlsx实现下载excel功能(二)
就最简单的使用来说:

aoa_to_sheet 就是把一个数组arr塞到一个sheet页中,arr类似于这种结构

arr = [
	['姓名', '年龄', '性别'],
	['张三', '18', '男'],
	['李四', '23', '女'],
]

json_to_sheet 的json数据长下面这样, 它会自动将键值变成表头,注意键值不能重复

arr = [
	{'姓名': '张三', '年龄': '18', '性别': '男'},
	{'姓名': '李四', '年龄': '23', '性别': '女'}
]

table_to_sheet 的最简单,你页面就显示了这么个表格,直接获取dom,再将这个dom作为参数就行了 。
最终下载的excel都是下面这样
基于el-table的树形表格及js-xlsx实现下载excel功能(二)

代码

设置excel样式

xlsx 目前更改的样式有限,只能设置列宽,合并单元格等,更复杂的样式修改可以看看xlsx-style


setExcelStyle() {
   const obj = {}
   const colsNum = this.cmpColumns.length
   // 动态添加列宽
   for(let i = 0; i < colsNum; i++){
     obj['!cols'].push({ wch: 15 })
   }
	/** 合并单元格 - 合并第一列的一二行
	obj['!merges'] = [{
          s: {  // 开始
            c: 0,
            r: 0,   // 0 行
          },
          e: { // 结束
            c: 0,
            r: 1,  // 1行
          },
        }]
   */
	
   return obj
 },
写成工具函数
/*
 * 工具函数
 * @FilePath: assets\js\excel.js
 */
import XLSX from 'xlsx'

function s2ab(s) {
  if (typeof ArrayBuffer !== 'undefined') {
    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
  } else {
    var buf = new Array(s.length);
    for (var i = 0; i != s.length; ++i) buf[i] = s.charCodeAt(i) & 0xFF;
    return buf;
  }
}

function type2Excel({data, style, type = "json", header = {}, skipHeader = true}) {
  
  //1、XLSX.utils.json_to_sheet(data) 接收一个对象数组并返回一个基于对象关键字自动生成的“标题”的工作表,默认的列顺序由使用Object.keys的字段的第一次出现确定
  //2、将数据放入对象workBook的Sheets中等待输出
  let sheet = null
  switch (type) {
    case 'json':
      sheet = Object.assign(XLSX.utils.json_to_sheet(data, header, skipHeader), style)
      break
    case 'aoa':
      sheet = Object.assign(XLSX.utils.aoa_to_sheet(data), style)
      break
    case 'dom':
      sheet = Object.assign(XLSX.utils.table_to_sheet(data), style)
      break
    default:
      break
  }
  return sheet
}

/**
 * @description: 传入一个数组,数组对象内容为 sheetName, data, style, type = "json", header = {}, skipHeader = true
 * @param {*} sheets
 * @return {*}
 */
function genExcel(sheets){
  var wopts = {
    bookType: 'xlsx',
    bookSST: false,
    type: 'binary'
  };
  var workBook = {
    SheetNames: [],
    Sheets: {},
    Props: {}
  };
  
  for(let sheet of sheets){
    const name = sheet.sheetName
    workBook.SheetNames.push(name)
    workBook.Sheets[name] = type2Excel(sheet)
  }

  //3、XLSX.write() 开始编写Excel表格 , s2ab() 将数据处理成需要输出的格式
  const blob = new Blob([s2ab(XLSX.write(workBook, wopts))], {
    type: 'application/octet-stream'
  })
  return blob
}

export {
  s2ab,
  type2Excel,
  genExcel
}
模拟a标签,点击下载函数
/*
 * @Description: post方式的接口,或者前端下载使用
 * @FilePath: assets\js\PostDLFile.js
 */
export default function postDLFile(data, name) {
  let blob = data
  let reader = new FileReader()
  reader.readAsDataURL(blob)
  reader.onload = (e) => {
    let a = document.createElement('a')
    a.download = `${name}.xlsx`
    a.href = e.target.result
    document.body.appendChild(a)
    a.click()
    document.body.removeChild(a)
  }
}
下载使用
downloadOrg(){
  // 这个函数就是你自己处理数据的函数,数据长啥样调啥样的接口
  const data = this.genJsonForExcel()  
  
  const style = this.setExcelStyle()
  const sheets = [{sheetName:'机构数据', data, style, 'json'}]
  postDLFile(genExcel(sheets), '下载的excel名字')
},