纯前端导出excel表格，axios下载文件流导出 （vue）

废话就不多说了，直接上代码，写完文章还得继续上班撸代码。

1. 首先安装好要用的插件，这里我使用的是 js-export-excel和jszip两个库，一个用来处理表格导出一个用来做压缩，如果你不需要做压缩可以不用安装jszip。(先说说js-export-excel的缺点吧，不支付表格样式的调整，如果你觉得这个不好使可以看看vue-json-excel这个组件)

	npm i js-export-excel
	npm i jszip

2. 接下来先封装几个工具函数，方便调用 关键在第三步的配置项，可以先看看第三步

文件流导出

都是大佬，这段代码我就不多逼逼了，有些是为了方便项目中用，你要是看它不爽就盘它，嘿嘿

	export function exportNetdot (data, original, msg = '导出成功', dom) {
	  try {
	    if(data.fileName){
	      original=decodeURI(data.fileName).split('=')
	      original=original[original.length-1]
	    }
	  } catch (error) {
	    console.error(error)
	  }
	  const typeObj = {
	    type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
	  }
	  const url = window.URL.createObjectURL(new Blob([data.data], typeObj));
	  console.log(url);
	  const link = document.createElement('a');
	  link.href = url
	  link.download = original;
	  document.body.appendChild(link);
	  link.click();
	  window.setTimeout(() => {
	    if(this)this.$message.success(msg)
	    document.body.removeChild(link);
	    dom && dom()
	  }, 0);
	}

文件压缩下载zip

	const JSZip = require('jszip');
	export function exportZip(file,zipName){
	  const zip = new JSZip();
	  zip.file(file.name, file);
	  zip.generateAsync({ type: 'blob' }).then( (content)=>{
	    exportNetdot({data:content},zipName)
	  });
	}

导出Excel (不要激动，这里只是最后一步单纯的做一下导出)

	export function exportExcelMode(option){
	  var toExcel = new ExportJsonExcel(option); 
	  /**
	   * option.saveAsBlob为true时不会直接导出，会返回一个处理好的文件对象，
	   * 可直接上传服务器，或者做一些其它处理如压缩
	   * */ 
	  const file=toExcel.saveExcel()
	  if(!file)return
	  /**
	   * exportNetdot({data:file},file.name) 
	   * 可以用得到的文件对象调exportNetdot导出，
	   * 但是没有必要，需要导出的话直接option.saveAsBlob=false或者直接不给这个属性，默认就是false直接导出
	  */
	  /**
	   * 导出压缩包时可以在option中加一个导出压缩的名称
	   * */ 
	  exportZip(file,option.zipFileName || 'test-zip.zip')
	}

1. 导出数据配置项 这里才是关键点

	getExportExcel(){
		const option = {
        fileName: '测试', // 导出Excel的文件名称，不用加后最名，插件自己会加
        saveAsBlob:false,// 是否需要返回文件对象，如果true则返回文件对象，不会直接导出，false不会返回文件对象，会直接导出下载Excel文件
        // zipFileName:'test.zip', 如果要导出压缩包可以在这里加一个压缩文件的名称
        datas: [
          {
            sheetData: [
              { uname: '小明', age: '22' },
              { uname: '小明', age: '120' },
            ],
            sheetName: 'sheet',// 表格的sheet名称，不给的话默认是sheet，sheet1，sheet2...
            sheetFilter: ['uname', 'age'], // 对应数据的key
            sheetHeader: ['用户名', '年龄'], //表头名称
            columnWidths: ['8', '4'], // 列宽
          },
          {
            sheetData: [
              { code: '522222222222', ph: '138888888888' },
              { code: '522222222222', ph: '138888888888' },
            ],
            sheetFilter: ['code', 'ph'], 
            sheetHeader: ['身份证', '手机'], 
            columnWidths: ['8', '8']
          },
        ],
      }
      exportExcelMode(option) // 在上面的工具函数中去看
	}

2. 最终效果
   直接导出excel
   
   导出压缩包
   
   

关于表格的样式问题和更多js-export-excel和jszip的使用有兴趣可以看看npm上的说明，或者github, 关于表格的样式和其它一些问题可以参考excel-style和exceljs，更多建议欢迎留言评论

ok就到这儿，点个赞，我们下次再见，拜拜 🤭