第一步：下載插件

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

第二步：封裝Export2Zip.js代碼

require('script-loader!file-saver');
import JSZip from 'jszip'
 //th是頭部標(biāo)題，jsonData是數(shù)據(jù)，txtName是txt文件名字，zipName是壓縮包的名字
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('導(dǎo)出失敗')
   })
 }
 export {export_txt_to_zip}

第三部：調(diào)用js進(jìn)行生成壓縮包進(jìn)行下載

 import {export_txt_to_zip} from '../assets/js/Export2Zip.js'   //需要用到的路由頁引入

//生成壓縮文件 調(diào)用這個(gè)方法就可以了
      handleDownload() {
          let tHeader = ['ID編號', '姓名', '性別', '地址', '時(shí)間','愛好','狀態(tài)'];//這里是頭部

          //我這里造了一些假數(shù)據(jù)
          let arr=[
            {"id":1,"date": "2016-05-03 17:22:43","name": "王小虎","sex":"男","address": "上海市普陀區(qū)金沙江路 1518 弄","state":false,"hobby":"吃飯"},
            {"id":2,"date": "2016-05-03 17:22:43","name": "王小虎","sex":"男","address": "上海市普陀區(qū)金沙江路 1518 弄","state":true,"hobby":"吃飯"},
            {"id":3,"date": "2016-05-03 17:22:43","name": "王小虎","sex":"男","address": "上海市普陀區(qū)金沙江路 1518 弄","state":true,"hobby":"吃飯"},
            {"id":4,"date": "2016-05-03 17:22:43","name": "王小虎","sex":"男","address": "上海市普陀區(qū)金沙江路 1518 弄","state":false,"hobby":"吃飯"},
            {"id":5,"date": "2016-05-03 17:22:43","name": "王小虎","sex":"男","address": "上海市普陀區(qū)金沙江路 1518 弄","state":false,"hobby":"吃飯"},
            {"id":6,"date": "2016-05-03 17:22:43","name": "王小虎","sex":"男","address": "上海市普陀區(qū)金沙江路 1518 弄","state":false,"hobby":"吃飯"},
            {"id":7,"date": "2016-05-03 17:22:43","name": "王小虎","sex":"男","address": "上海市普陀區(qū)金沙江路 1518 弄","state":false,"hobby":"吃飯"},
            {"id":8,"date": "2016-05-03 17:22:43","name": "王小虎","sex":"男","address": "上海市普陀區(qū)金沙江路 1518 弄","state":false,"hobby":"吃飯"},
            {"id":9,"date": "2016-05-03 17:22:43","name": "王小虎","sex":"男","address": "上海市普陀區(qū)金沙江路 1518 弄","state":false,"hobby":"吃飯"},
            {"id":10,"date": "2016-05-03 17:22:43","name": "王小虎","sex":"男","address": "上海市普陀區(qū)金沙江路 1518 弄","state":false,"hobby":"吃飯"}
          ]


        //   let list = this.list;
          let data = this.formatJson(arr);
          export_txt_to_zip(tHeader, data, 'zjps', 'zjps');
      },
      //這里將對象格式改成數(shù)組格式
      formatJson(jsonData) {
          let arr = [];//添加一個(gè)數(shù)組
          //遍歷循環(huán)
          for(let item in jsonData){
              //我這里是為了把順序排行取的是對象里面的數(shù)據(jù)
              arr.push([jsonData[item].id,jsonData[item].name,jsonData[item].sex,jsonData[item].address,jsonData[item].date,jsonData[item].hobby,jsonData[item].state]);
          }
          return arr;
      }

到了這里就完成了前端vue導(dǎo)出Zip文件文件了

formatJson 這個(gè)方法把數(shù)據(jù)格式改為

image.png

借鑒于https://blog.csdn.net/qq_41810005/article/details/90703378