【Vue】vue文件批量下载与单个文件下载

页面代码：

<el-dialog
 v-dialogDrag       
 title="查看文件"      
 :visible.sync="dialogLookVisible"  
 width="70%"     
 :close-on-click-modal="false">     
     <el-button type="primary" size="mini" @click="downLoadAllFile()">批量下载</el-button> 
     <el-table stripe border :data="lookList" style="width: 100%">  
        <el-table-column prop="file_name" label="文件名称"></el-table-column> 
        <el-table-column prop="file_type" label="文件类型"></el-table-column> 
        <el-table-column label="操作">        
           <template slot-scope="scope"> 
               <el-button 
                 type="warning" 
                 size="mini" 
                 @click.native.prevent="downLoadFile(scope.$index,scope.row)">
               下载</el-button>
           </template>
        </el-table-column> 
     </el-table> 
</el-dialog>

js代码

import axios from "axios";
export default {
  data: function() {
    return {
      dialogLookVisible: false,
      lookList: []
    };
  },
  methods: {
    // 下载单个文件
    downLoadFile: function(index, row) {
      let that = this;
      //通过文件名称的后缀判断文件类型
      let blobType = that.getFileType(row.file_name);
      //读取文件的字符串，在img或video等带有src属性的标签上展示
      window.URL = window.URL || window.webkitURL;
      axios({
        method: "post",
        url: "url",
        responseType: "blob",
        data: {},
        headers: { "Content-Type": "application/json;charsetset=UTF-8" }
      }).then(res => {
          let blob = new Blob([res.data], { type: blobType });
          const link = document.createElement("a");
          //通过window.URL.createObjectURL创建URL对象
          link.href = window.URL.createObjectURL(blob);
          link.download = row.file_name;
          link.click();
          //释放创建的URL对象
          window.URL.revokeObjectURL(link.href);
        }).catch(error => {
          console.log(error);
        });
    },
    // 批量下载文件
    downLoadAllFile: function() {
      let that = this;
      window.URL = window.URL || window.webkitURL;
      axios({
        method: "post",
        url: "url",
        responseType: "blob",
        data: {},
        headers: { "Content-Type": "application/json;charsetset=UTF-8" }
      }).then(res => {
          let blob = new Blob([res.data], { type: 'application/zip' });
          const link = document.createElement("a");
          link.href = window.URL.createObjectURL(blob);
          link.download = '批量下载.zip';
          link.click();
          window.URL.revokeObjectURL(link.href);
        }).catch(error => {
          console.log(error);
        });
    },
    // 根据文件名称的后缀判断文件类型
    getFileType: function(name) {
      // image/*
      var imgType = ["gif", "jpeg", "jpg", "png"];
      // application/vnd.ms-excel
      var excelType = ["xls", "xlsx"];
      // application/msword
      var wordType = ["doc", "dot"];
      // text/plain
      var txtType = ["txt"];
      // application/pdf
      var pdfType = ["pdf"];
      if (RegExp(".(" + imgType.join("|") + ")$", "i").test(name.toLowerCase())) {
        return "image/*";
      } else if (RegExp(".(" + excelType.join("|") + ")$", "i").test(name.toLowerCase())) {
        return "application/vnd.ms-excel";
      } else if (RegExp(".(" + wordType.join("|") + ")$", "i").test(name.toLowerCase())) {
        return "application/msword";
      } else if (RegExp(".(" + txtType.join("|") + ")$", "i").test(name.toLowerCase())) {
        return "text/plain";
      } else if (RegExp(".(" + pdfType.join("|") + ")$", "i").test(name.toLowerCase())) {
        return "application/pdf";
      } else {
        return "系统中找不到此类型的文件";
      }
    },
};