前端实现下载功能的方法

前言

下载功能目前是前端项目中比较常用的功能，但刚开始写项目可能不知道如何下手，鄙人刚写的时候也一头雾水，昨天刚完成了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页面
 <a href="" @click.prevent @click="downTemplate">下载模板</a>

//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穿参

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