vue文件下载功能

vue文件下载功能

第一种

html

js
  window.open(`${this.$config.IPUPLOAD}file/${id}`, "hidden_frame");


第二种

   html 
    下载
      
js 

 toDownLoad(id) {
      if (!this.isDownLoadNow) {
        this.isDownLoadNow = true;
        this.$getRequest(`${this.$config.IPUPLOAD}file/${id}/presignedurl`)
          .then(res => {
            console.log("文件下载", res);
            this.downloadhttp = res.presignedUrl;
            // this.isDownLoadNow = false;
            setTimeout(() => {
              this.$refs.downLoadA.click();
              this.isDownLoadNow = false;
            }, 1000);

            // let a = document.createElement("button");
            // a.href = res.presignedUrl;
            // a.click();
          })
          .catch(() => {
            this.$message.error("请求文件失败", 1);
          });
      }
    },



经过试验正确的方法
xtract(scope) {
      axios({
        // 用axios发送post请求
        method: "post",
        url: `${this.$config.MONSTA}/groupService/downFile?id=` + scope.row.id, // 请求地址
        // 参数
        responseType: "blob", // 表明返回服务器返回的数据类型
        headers: {
          "Content-Type": "application/json"
        }
      }).then(res => {
        // 处理返回的文件流
        const blob = new Blob([res.data]); //new Blob([res])中不加data就会返回下图中[objece objece]内容（少取一层）
        const fileName = "统计.xlsx"; //下载文件名称
        const elink = document.createElement("a");
        elink.download = fileName;
        elink.style.display = "none";
        elink.href = URL.createObjectURL(blob);
        document.body.appendChild(elink);
        elink.click();
        URL.revokeObjectURL(elink.href); // 释放URL 对象
        document.body.removeChild(elink);
      });
    },

另一篇文章:https://blog.csdn.net/weixin_43216105/article/details/105998242?utm_medium=distribute.pc_category.none-task-blog-hot-4.nonecase&depth_1-utm_source=distribute.pc_category.none-task-blog-hot-4.nonecase&request_id=


第一种方式是前端创建超链接，通过a标签的链接向后端服务发get请求，接收后端的文件流，非常简单：

下载模板

另一种情况是创建div标签，动态创建a标签：
下载
function downloadExcel() {
    let a = document.createElement('a')
    a.href ="/user/downloadExcel"
    a.click();
} 

第二种方式通过创建iframe的方式：

导出
//method方法：
handleExport(row) {
      var elemIF = document.createElement('iframe')
      elemIF.src = 'user/downloadExcel?snapshotTime=' + formatDate(new Date(row.snapshotTime), 'yyyy-MM-dd hh:mm') +
                    '&category=' + row.category 
      elemIF.style.display = 'none'
      document.body.appendChild(elemIF)
    }
   


第三种方式，会对后端发的post请求，使用blob格式

导出
//method方法
handleExport(row){
const url="/user/downloadExcel"
const options = {snapshotTime:formatDate(new Date(row.snapshotTime), 'yyyy-MM-dd hh:mm')}
exportExcel(url,options)
}
/**
 * 封装导出Excal文件请求
 * @param url
 * @param data
 * @returns {Promise}
 */
//api.js
export function exportExcel(url, options = {}) {
  return new Promise((resolve, reject) => {
    console.log(`${url} 请求数据，参数=>`, JSON.stringify(options))
    axios.defaults.headers['content-type'] = 'application/json;charset=UTF-8'
    axios({
      method: 'post',
      url: url, // 请求地址
      data: options, // 参数
      responseType: 'blob' // 表明返回服务器返回的数据类型
    }).then(
      response => {
        resolve(response.data)
        let blob = new Blob([response.data], {
          type: 'application/vnd.ms-excel'
        })
        console.log(blob)
        let fileName = Date.parse(new Date()) + '.xlsx'
        if (window.navigator.msSaveOrOpenBlob) {
          // console.log(2)
          navigator.msSaveBlob(blob, fileName)
        } else {
          // console.log(3)
          var link = document.createElement('a')
          link.href = window.URL.createObjectURL(blob)
          link.download = fileName
          link.click()
          //释放内存
          window.URL.revokeObjectURL(link.href)
        }
      },
      err => {
        reject(err)
      }
    )
  })
}



实现功能具体代码 

 let data = res;
      if (!data) {
        this.$message.error("下载失败，解析数据为空！");
        return;
      }
      const datetime = Date.now();
      // 创建一个新的url，此url指向新建的Blob对象
      let url = window.URL.createObjectURL(new Blob([data]));
      // 创建a标签，并隐藏改a标签
      let link = document.createElement("a");
      link.style.display = "none";
      // a标签的href属性指定下载链接
      link.href = url;
      //setAttribute() 方法添加指定的属性，并为其赋指定的值。
      let fileName = datetime + "." + this.downType;
      link.setAttribute("download", fileName);
      document.body.appendChild(link);
      link.click();
      this.$message.success("导出成功");