前端vue导出Zip文件

第一步：下载插件

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

第二步：封装Export2Zip.js代码

require('script-loader!file-saver');
import JSZip from 'jszip'
 //th是头部标题，jsonData是数据，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('导出失败')
   })
 }
 export {export_txt_to_zip}

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

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

//生成压缩文件 调用这个方法就可以了
      handleDownload() {
          let tHeader = ['ID编号', '姓名', '性别', '地址', '时间','爱好','状态'];//这里是头部

          //我这里造了一些假数据
          let arr=[
            {"id":1,"date": "2016-05-03 17:22:43","name": "王小虎","sex":"男","address": "上海市普陀区金沙江路 1518 弄","state":false,"hobby":"吃饭"},
            {"id":2,"date": "2016-05-03 17:22:43","name": "王小虎","sex":"男","address": "上海市普陀区金沙江路 1518 弄","state":true,"hobby":"吃饭"},
            {"id":3,"date": "2016-05-03 17:22:43","name": "王小虎","sex":"男","address": "上海市普陀区金沙江路 1518 弄","state":true,"hobby":"吃饭"},
            {"id":4,"date": "2016-05-03 17:22:43","name": "王小虎","sex":"男","address": "上海市普陀区金沙江路 1518 弄","state":false,"hobby":"吃饭"},
            {"id":5,"date": "2016-05-03 17:22:43","name": "王小虎","sex":"男","address": "上海市普陀区金沙江路 1518 弄","state":false,"hobby":"吃饭"},
            {"id":6,"date": "2016-05-03 17:22:43","name": "王小虎","sex":"男","address": "上海市普陀区金沙江路 1518 弄","state":false,"hobby":"吃饭"},
            {"id":7,"date": "2016-05-03 17:22:43","name": "王小虎","sex":"男","address": "上海市普陀区金沙江路 1518 弄","state":false,"hobby":"吃饭"},
            {"id":8,"date": "2016-05-03 17:22:43","name": "王小虎","sex":"男","address": "上海市普陀区金沙江路 1518 弄","state":false,"hobby":"吃饭"},
            {"id":9,"date": "2016-05-03 17:22:43","name": "王小虎","sex":"男","address": "上海市普陀区金沙江路 1518 弄","state":false,"hobby":"吃饭"},
            {"id":10,"date": "2016-05-03 17:22:43","name": "王小虎","sex":"男","address": "上海市普陀区金沙江路 1518 弄","state":false,"hobby":"吃饭"}
          ]


        //   let list = this.list;
          let data = this.formatJson(arr);
          export_txt_to_zip(tHeader, data, 'zjps', 'zjps');
      },
      //这里将对象格式改成数组格式
      formatJson(jsonData) {
          let arr = [];//添加一个数组
          //遍历循环
          for(let item in jsonData){
              //我这里是为了把顺序排行取的是对象里面的数据
              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导出Zip文件文件了

formatJson 这个方法把数据格式改为

image.png

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