vue 将多个文件(文件后缀名设置)下载成zip包

1. 安装jszip 、file-saver

npm install jszip -s
npm install file-saver -s

2. html

<template>
  <div class="model">
      <el-button type="primary" size="small" @click="handelZip()">导出
      </el-button>
  </div>
</template>

3.调用方法

<script>
import axios from "axios";
import JSZip from "jszip";
import FileSaver from "file-saver";
//headers,responseType 是防止xml文档内容出现乱码
const getFile = url => {
  return new Promise((resolve, reject) => {
    axios({
      method: "get",
      url,
      headers: {
        'Content-Type': 'application/json; application/octet-stream'
      },
      responseType: 'blob',
    })
      .then(data => {
        resolve(data.data);
      })
      .catch(error => {
        reject(error.toString());
      });
  });
};
export default {
  data () {
    return {
       ziptitle:"压缩包名称",
       XMLData: [
         {
            name:"xml模板1",
            xmltitle:"<?xml version=\"1.0\" encoding=\"utf-8\"?><CRM><noticeId>345646</noticeId><satName>ZOHREH-2</satName><country>IRN</country></CRM>"
         },
         {
            name:"xml模板2",
            xmltitle:"<?xml version=\"1.0\" encoding=\"utf-8\"?><CRM><noticeId>345647</noticeId><satName>ZOHREH-3</satName><country>TER</country></CRM>"
         } 
       ]
           
    };
  },
  methods: {
    //点击事件
    handelZip () {
      let demo = [];
      let demoName = [];
      this.XMLData.forEach((v) => {
        //v.xmltitle需要压缩的文件内容
        let url = window.URL.createObjectURL(
          new Blob([v.xmltitle], { type: "text/xml;charset=utf-8" })
        );
        demo.push(url);
        demoName.push(v.name);//获取设置文件的名称
      })
      const data = demo; // 需要下载打包的路径, 可以是本地相对路径, 也可以是跨域的全路径
      const file_demoName = demoName;
      const zip = new JSZip();
      const cache = {};
      const promises = [];
      data.forEach((item, index) => {
        const promise = getFile(item).then(data => {
          const file_name = file_demoName[index] + '.xml'; // 将每个模板名称设置成文件名+'.xml' 加后缀名
          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.ziptitle+ ".zip"); // 利用file-saver保存文件  自定义文件名
        });
      });
    }
  }
};
</script>