纯前端导出excel表格,axios下载文件流导出 (vue)

废话就不多说了,直接上代码,写完文章还得继续上班撸代码。
  1. 首先安装好要用的插件,这里我使用的是 js-export-excel和jszip两个库,一个用来处理表格导出一个用来做压缩,如果你不需要做压缩可以不用安装jszip。(先说说js-export-excel的缺点吧,不支付表格样式的调整,如果你觉得这个不好使可以看看vue-json-excel这个组件)
	npm i js-export-excel
	npm i jszip
  1. 接下来先封装几个工具函数,方便调用 关键在第三步的配置项,可以先看看第三步
文件流导出

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

	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) // 在上面的工具函数中去看
	}
  1. 最终效果
    直接导出excel
    纯前端导出excel表格,axios下载文件流导出 (vue)_第1张图片
    导出压缩包
    纯前端导出excel表格,axios下载文件流导出 (vue)_第2张图片
    在这里插入图片描述
关于表格的样式问题和更多js-export-excel和jszip的使用有兴趣可以看看npm上的说明,或者github, 关于表格的样式和其它一些问题可以参考excel-style和exceljs,更多建议欢迎留言评论
ok就到这儿,点个赞,我们下次再见,拜拜

你可能感兴趣的:(vue,前端,vue.js,javascript)