vue下载功能

场景需要：在一个数据表的右上方有一个下载按钮，点击之后，进行这个表格的下载。

<el-button type="success" @click="downloadTable">模板下载</el-button>

data：  
      //下载时发送请求的数组
      downloadArry: [],
methods：
 //下载事件
    downloadTable() {
      //制作一个发送请求时的参数
      this.columns.forEach((item) => {
        this.downloadArry.push({ fildName: item.prop });
      });
      this.$http({
        method: "post",
        url: "/data/table/download",
        params: { userId: this.userId },
        data: {
          dataMap: this.downloadArry,
          tableName: this.table_info.name,
          tableAnnotation: this.table_info.des,
        },
        responseType: "blob",
      })
        .then((res) => {
          this.exportMethd(this.table_info.name, res.data);
          this.downloadArry = [];
        })
        .catch((err) => {
          console.log(err);
          this.downloadArry = [];
        });
    },
    // 下载方法
    exportMethd(title, data) {
      const link = document.createElement("a");
      // 决定下载的是什么格式的文件
      let blob = new Blob([data], {
        type: "application/vnd.ms-excel;charset=utf-8",
      });
      link.style.display = "none";
      link.href = URL.createObjectURL(blob);
      link.download = title; // 下载的文件名
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
    },

本文地址：https://blog.csdn.net/weixin_43131046/article/details/114304199