vue结合 elementui下载组件(el-upload) 实现文件下载

//  使用了 Element Popover 弹出框
 <el-popover
          placement="bottom"
          width="180"
          trigger="manual"
          v-model="visible"
        >
          <div class="content">
            <span @click="downExcelTemplatefn">下载模板</span>
            <span @click="dialogVisible3 = true">导入案件</span>
            <span @click="dialogVisible1 = !dialogVisible1">系统添加</span>
          </div>
          <el-button slot="reference" @click="visible = !visible" type="primary"
            >添加案件</el-button
          >
        </el-popover>

        <el-dialog title="导入案件" :visible.sync="dialogVisible3" width="40%">
          <div class="upcontent">
            <el-upload
              class="upload-demo"
              accept=".xls,.xlsx"
              action="dev/controller/checkTaskDispose/importCheckResultExcel"
              :before-remove="beforeRemove"
              :show-file-list="true"
              :on-change="handleChange"
              :http-request="modeUpload"
              ref="upload"
              :on-exceed="outexceed"
              multiple
              :limit="1"
            >
              <el-button size="small" type="primary">点击上传</el-button>
            </el-upload>
            <div class="text">支持.xlsx、.xls格式，1000kb以内</div>
          </div>

          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible2 = false">取 消</el-button>
            <el-button type="primary" @click="updatefile">确 定</el-button>
          </span>
        </el-dialog>




  //下载案件模板（通过接口获取到的是文件流的形式，然后前端再利用Bolb来读取文件流）
    downExcelTemplatefn() {
      downExcelTemplate()
        .then((res) => { // 接口
          console.log(res);
          if (!res.data) {
            return;
          }
          var name = "导入案件模板.xlsx";
          let blob = new Blob([res.data], {
            type: "application/vnd.ms-excel;charset=utf-8",
          });
          var url = window.URL.createObjectURL(blob);
          var aLink = document.createElement("a"); //创建a标签
          aLink.style.display = "none";
          aLink.href = url;
          aLink.setAttribute("download", name); // 设置文件 name
          document.body.appendChild(aLink);
          aLink.click(); //自执行下载
          document.body.removeChild(aLink); //下载完成移除元素
          window.URL.revokeObjectURL(url); //释放掉blob对象
        })
        .catch((error) => {});
    },

更多 blob 对象的用法 如(有大文件分片上传等)

标签：el,vue,name,aLink,res,blob,var,下载
来源： https://blog.csdn.net/WACBG/article/details/120247716