前端实现下载功能的方法

前言

下载功能目前是前端项目中比较常用的功能，但刚开始写项目可能不知道如何下手，鄙人刚写的时候也一头雾水，昨天刚完成了 get 请求传参的下载，鄙人前端小白，期待指正。

get 请求传参的下载

首先需要对 axios 做一个小小的封装，每个人的封装方法都各有不同不做过多赘述。

下载接口的封装如下。

import request from "@/utils/downLoad" // 引用自己封装好的 axios
 // 封装下载的接口，导出。export function down(url:string,params:any){
  return request({
    url: url,// 后端要求的接地址
    method:'get',//get 方法
    params:params,// 后端要求的参数
    responseType:'blob'// 关键之处，下载文件的 responseType 设置为 'blob'
  })
}

在需要下载的组件内引用，把自己的接口地址和要传的参数替换一下，看一下下载的文件类型。

import {down} from '@/server/http/http' // 路径是刚才封装的下载接口的路径

//html 页面
  下载模板 

//js 页面
        const downTemplate = () => {down('/planInfo/planTemplateExport', { planId: props.id}).then((res: any) => {const blob = new Blob([res.data], 
                  { type: "application/vnd.ms-excel" 
        // 此处是下载的文件类型，get 请求一般后端都会设置好文件类型，要和后端沟通好，不同的文件类型 type 也会不同，我这里是下载了 excel 文件 });
                let url = window.URL.createObjectURL(blob);
                if ("download" in document.createElement("a")) {
                    try {let link = document.createElement("a");
                        link.style.display = "none";
                        link.href = url;
                        link.setAttribute("download", '下载模板');
                        document.body.appendChild(link);
                        link.click();
                        link.remove()} catch (e) {console.log(e)
                    }
                }
            })
        }

以上就是本人写的 get 请求下载文件，欢迎留言指正！

这种方法可以满足大部分的下载需求，注意 type 那里，容易报错。

———————————————————————————————–

2023.3.28 更新

get 和 post 封装一下

export function downLoadFile(method: any, url: any, options?: any) {let xhr = new XMLHttpRequest();        // 定义 http 请求对象
  xhr.open(method, url, true);// 根据接口使用请求方式
  xhr.responseType = "blob";  // 返回类型 blob
  xhr.setRequestHeader("Authorization", store.state.token);
  if (method === 'post') {xhr.setRequestHeader("Content-type", "application/json;charset=UTF-8");
    xhr.send(JSON.stringify(options))
  } else {xhr.setRequestHeader("Content-type", "application/x-msdownload");
    xhr.send()}
 // 定义请求完成的处理函数, 请求前可以增加加载框 / 禁用下载按钮逻辑
  xhr.onload = function (response: any) {// console.log('response', response);
    // console.log('this', this);
    // console.log('xhr', xhr);


    if (this.status === 200) {
      // 请求完成
      var blob = this.response;
      var reader = new FileReader();
      reader.readAsDataURL(blob);  // 转换为 base64，可以直接放入 a 标签 href
      reader.onload = function (e: any) {// console.log(e);            // 查看有没有接收到数据流
        // 转换完成，创建一个 a 标签用于下载
        var link = document.createElement('a');
        // link.download = '';            // 此处填写文件地址
        // console.log(xhr.getAllResponseHeaders());

        var resHeader: any = xhr.getResponseHeader('Content-Disposition') // 获取响应消息头
        let temp = resHeader.split(";")[1].split("fileName=")[1];
        let fileName = decodeURIComponent(temp);
        link.setAttribute('download', fileName)
        link.href = e.target.result;
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
      }
    }
    else {message.error('未知的错误! 文件下载失败')
    }
  }
  // xhr.send();}

调接口就把这个方法再次封装暴露出去，以下是我的一个案例，可以将自己的接口替代掉

// 附件
export function DownLoadgetEntrustFileUrls(url: number) {downLoadFile('get', `${config.DownLoadUrl}/jkyErp/web/file_output_stream/getEntrustFileUrls?url=${url}`)
}
// 这里的 config.DownLoadUrl 是又做了一个封装，也就是 baseUrl, 跳了好几层，总之这里就是 baseUrl
//url 是页面传的参数

export function getApiBaseLoadUrl() {
    const baseUrl = process.env.VUE_APP_PROXY === 'true'
        ? `${PROXY_DOWN_PATH}`
        : process.env.VUE_APP_BASE_API
    return baseUrl
}

页面中引用

const downloadFJ = (url: any) => {DownLoadgetEntrustFileUrls(url);
    };
//url 穿参 

总结，这种方法，看起来比较繁琐，看个人需求。