下载

最新推荐文章于 2024-05-10 08:38:45 发布

一个假的前端男

最新推荐文章于 2024-05-10 08:38:45 发布

阅读量259

点赞数

分类专栏： js vue 文章标签：前端下载

本文链接：https://blog.csdn.net/IT_iosers/article/details/113592857

版权

vue 同时被 2 个专栏收录

79 篇文章 1 订阅

订阅专栏

16 篇文章 0 订阅

订阅专栏

后端请求返回数据（数据流）

请求头中content-disposition 存放有fileName 用于a 标签的download属性
也可以让后端在请求头中专门加一个fileName 存放（带后缀的文件名）

前端下载

1、发请求时需带上请求头，responseType：设置为arraybuffer 或者blob

请求设置

export function downLoadFile(url){
  const _header ={};
  _header['Content-Type'] = _header['Content-Type'] || 'application/json';
  _header['Authorization'] = util.local.get("userInfo").token || '';
  return axios({
    url:url,
    method:'get',
    responseType:'blob',
    headers:_header
  })
}

具体的操作：通过创建a标签片段通过a标签的href跳转 download 下载

Blob 对象表示一个不可变、原始数据的类文件对象。Blob 表示的不一定是JavaScript原生格式的数据
这里通过点击事件Blob详解

      downloadFiles() {
        downLoadFile(`/alarm/sensitive/download/${this.alarmId}`).then(res=>{
          console.log(res,'res');   // 得到后端的请求的内容
          const url = window.URL.createObjectURL(new Blob([res.data]))  // 创建一个blob的链接  用于处理二进制
          const fileName = res.headers.filename    // 用于存放文件名
          // const fileName = res.headers['content-disposition'].split(';')[1].slice(9)
          const link = document.createElement('a')  
          link.style.display = 'none'
          link.href = url
          link.download = fileName
          document.body.appendChild(link)
          link.click()
          document.body.removeChild(link)
        })
      }

后端请求返回数据（内容） get post 数据如下图

如图
在这里插入图片描述

get 请求

直接通过a标签点击链接即可

 downloadFiles() {
  const link = document.createElement('a')  
  link.style.display = 'none'
  // link 后面直接放请求
  link.href = window.API_BASE_URI+`/api/v1/admin/coupon/datatype=${this.downLoadFlag}&productCode=${this.productCode}`; /
  link.download = fileName
  document.body.appendChild(link)
  link.click()
  document.body.removeChild(link)
})
 }

表格格式最后用后缀名为:.csv

post 请求

    downFile() {
      let data = Object.assign({}, this.listQuery);
      // data.limit = 1000;
      var temp = {};
      temp.begin = data.beginTime;
      temp.end = data.endTime;

      downOrder(temp)
        .then(res => {
          const url = window.URL.createObjectURL(new Blob([res.data]));
          const fileName = "销售订单.csv";
          const link = document.createElement("a");
          link.style.display = "none";
          link.href = url;
          link.download = fileName;
          document.body.appendChild(link);
          link.click();
          document.body.removeChild(link);
        })
        .catch(err => {
          console.log(err);
        });
    }