vue插件-前端导出Excel表格
安装依赖2个依赖
cnpm install --save xlsx file-saver
组件里头引入import FileSaver from 'file-saver' 
import XLSX from 'xlsx'

 

组件methods里写一个方法
exportExcel () {         /* generate workbook object from table */ var wb = XLSX.utils.table_to_book(document.querySelector('#out-table'))  //表格的id /* get binary string as output */ var wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' })         try {
             FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), 'sheetjs.xlsx')
         } catch (e) { if (typeof console !== 'undefined') console.log(e, wbout) }         return wbout
     },

 

vue插件-前端批量打包导出文件(.zip)
安装依赖
npm install -S axios
npm install -S jszip
npm install -S file-saver
组件里头引入import JSZip from 'jszip'import fileSaver from 'file-saver'import axios from 'axios'

 

js中引入方法
export function getFile(url) {  return request({
    url: url,
    method: 'get',
    responseType: 'blob'
  })
}

 

组件methods里写一个方法
handleBatchDownload() {  const dataFile = this.ftypeList  //数据源
  const zip = new JSZip()  const cache = {}  const promises = []
  dataFile.forEach(item => {const promise = getFile(item.url).then(data => { // 下载文件, 并存成ArrayBuffer对象  const arr_name = item.url.split('/')      const file_name = item.typeName + arr_name[arr_name.length - 1] //文件名称  zip.file(file_name, data, { binary: true }) // 逐个添加文件  cache[file_name] = data
    })
    promises.push(promise)
  })
  Promise.all(promises).then(() => {
    zip.generateAsync({ type: 'blob' }).then(content => { // 生成二进制流  FileSaver.saveAs(content, this.currentTime + '复工前准备事项.zip') // 利用file-saver保存文件    })
  })
},

 

this.ftypeList格式图
smile

更多文章请关注《万象专栏》

本栏目由《康祺惠购APP》独家赞助