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);
    },

猜你喜欢

转载自blog.csdn.net/weixin_43131046/article/details/114304199