欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

vue下载功能

程序员文章站 2022-03-09 07:51:50
场景需要:在一个数据表的右上方有一个下载按钮,点击之后,进行这个表格的下载。模板下载data: //下载时发送请求的数组 downloadArry: [],methods: //下载事件 downloadTable() { //制作一个发送请求时的参数 this.columns.forEach(...

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

<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