vue插件-前端导出文件

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格式图