前端vue导出Zip文件

第一步：下载插件 

npm install jszip  /npm install script-loader / npm install file-saver

第二步：封装js代码

require('script-loader!file-saver');
import JSZip from 'jszip'
 //th是头部标题，jsonData是数据，txtName是txt文件名字，zipName是压缩包的名字
export function export_txt_to_zip(th, jsonData, txtName, zipName) {
   const zip = new JSZip()
   const txt_name = txtName || 'file'
   const zip_name = zipName || 'file'
   const data = jsonData
   let txtData = `${th}\r\n`
   data.forEach((row) => {
     let tempStr = ''
     tempStr = row.toString()
     txtData += `${tempStr}\r\n`
   })
   zip.file(`${txt_name}.txt`, txtData)
   zip.generateAsync({
     type: "blob"
   }).then((blob) => {
     saveAs(blob, `${zip_name}.zip`)
   }, (err) => {
     alert('导出失败')
   })
 }

第三部：调用js进行生成压缩包进行下载

    //触发事件进项调用
    handleDownload() {
       import('@/vendor/Export2Zip').then(zip => {
         const tHeader = ['Id', 'Title', 'Author', 'Readings', 'Date']
         const filterVal = ['id', 'title', 'author', 'pageviews', 'display_time']
         const list = this.list
         const data = this.formatJson(filterVal, list)
         zip.export_txt_to_zip(tHeader, data, this.filename, this.filename)
       })
     },
     formatJson(filterVal, jsonData) {
       return jsonData.map(v => filterVal.map(j => v[j]))
     }