Excel模版下载

最近项目经常遇到excel的相关内容。这里写一下我做的一个Excel模版下载功能。

第一步准备Excel表的内容

下面的代码中data是作为文件内容显示。headerColumnsMap是文件的内容标题。所以需要对象中键值对必须对应。这些内容就是Excel的文件名、文件中的Sheet1和具体内容。

const params = {
        data: [
          {
            name: "包袋",
            age: "18",
          }
        ],
        sheetName: "Sheet1",
        fileName: `模板.xlsx`,
        headerColumnsMap: {
          name: "品类",
          age:"年龄"
        },
      };

第二步数据传入封装函数

export const downloadXLSXFromJsonArray = function ({ data, sheetName, headerColumnsMap = {}, fileName }) {
}

处理函数形参

const header = Object.keys(headerColumnsMap)

先把准备好的内容标题的可枚举属性的键读取出来组成数组

let ws = XLSX.utils.json_to_sheet(data, { header, skipHeader: !true })

借用插件工具把把数据按照读取的数组header转化为worksheet。转换表头参考 blog.csdn.net/juzipidemim…

const range = XLSX.utils.decode_range(ws['!ref'])

这是为了拿到转化过的值，进行下一步

for (let c = range.s.c; c <= range.e.c; c++) {
    const header = XLSX.utils.encode_col(c) + '1'
    ws[header].v = headerColumnsMap[ws[header].v]
  }

其中s指的是第一个单元格，c是指列，r是指行，e是最后一个单元格。最好得到的是每一列的字母。例如A，B，C。这时，转化结束！！！

到这一步要考虑放在哪一个表了，进行blob转化

在封装一个函数以便调用

//sheet是转化好的数据，sheetName是表名
const sheet2blob = function (sheet, sheetName) {
  sheetName = sheetName || 'sheet1'
  var workbook = {
    SheetNames: [sheetName],
    Sheets: {}
  };
  workbook.Sheets[sheetName] = sheet
  //到这里配置好了放在那个表里，默认sheet1，并把数据放入相应表
  
  // 生成excel的配置项
  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
}

blob转化完成回到downloadXLSXFromJsonArray函数

  //这里调用封装的blob转化函数
  var url = sheet2blob(ws, sheetName)

  if (typeof url == 'object' && url instanceof Blob) {
    url = URL.createObjectURL(url); // 创建blob地址
  }
  
  //创建a标签，要用它下载，很重要
  var aLink = document.createElement('a')
  aLink.href = url;
  aLink.download = fileName || '' // HTML5新增的属性，指定保存文件名，可以不要后缀，注意，file:///模式下不会生效
  var event;
  
  //可能存在浏览器的MouseEvent没有的情况
  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)
  }
  
  //最后触发a标签下载
  aLink.dispatchEvent(event)

到这里就完成了。。。

总结一下

其实难度不大，网上都有教程。只是在文件转换那里需要仔细看文档。我还要努力学习才行，请教了老大才知道！！

excel文件固定模版的下载