前端把两个url里的文件放在同一个压缩包里，再返回给用户(你前端能做的凭什么让我后端做？)

☀️ 需求 (一个奇葩需求😵)

• 后端给两个文件的url, 让前端把这个两个url的文件放在同一个压缩包里 再返回给用户

🙈实现思路 (打工人只有说干就干的命)

• 引入jszip用于压缩文件，引入file-saver用于导出文件

✨效果图

🌰 栗子(vue2)

• 引入jszip、file-saver

npm i jszip
npm i file-saver

template

<template>
  <div class="home">
    <div class="btn" @click="init">下载</div>
  </div>
</template>

js

<script>
import JSZip from "jszip";
import { saveAs } from "file-saver";
import axios from "axios";

export default {
  name: "Home",
  components: {},
  data() {
    return {
      zip: "",
    };
  },
  mounted() {
    console.log("mounted");
  },
  methods: {
    async init() {
      this.zip = new JSZip();

      let res = await axios({
        methods: "get",
        url: "/afc/M00/00/1F/L3OqKmI6tg2AcNo_AAApwgmx2GY13.xlsx",  //请求文件A
        responseType: "blob",
      });

      let res1 = await axios({
        methods: "get",
        url: "/afc/M00/00/20/L3OqKmI67YSAKDR6AAOo8QdpD3o022.zip", //请求文件B
        responseType: "blob",
      });

      if (res && res1) {
        this.zip.file("smile.xlsx", res.data);  //将返回的文件A写入压缩包
        this.zip.file("smile.zip", res1.data);  //将返回的文件B写入压缩包

        this.zip.generateAsync({ type: "blob" }).then(function (content) {
          saveAs(content, "example.zip"); //导出文件
        });
      }
    },
  },
};
</script>