vue项目通用下载方法

vue项目文件下载方法

1、方法的封装

在utils/request.js文件里

// 通用下载方法
export function download(url, params, filename) {
	return service
		.post(url, params, {
			transformRequest: [(params) => { return tansParams(params);}],//通过transformRequest配置项，对请求的参数进行了转换，使用了一个名为tansParams的函数来进行参数转换。
			headers: { "Content-Type": "application/x-www-form-urlencoded" },//指定请求的数据格式为表单形式
			responseType: "blob"//设置响应的数据类型为blob，以便能够处理二进制数据
		})
		.then((data) => {//当请求成功时，执行回调函数。这里将响应的数据赋值给content变量，并使用Blob对象创建一个二进制数据对象blob。
			const content = data;
			const blob = new Blob([content]);
			if ("download" in document.createElement("a")) {//检查浏览器是否支持使用download属性进行文件下载
				const elink = document.createElement("a");//创建<a>元素并设置相关属性
				elink.download = filename;
				elink.style.display = "none";
				elink.href = URL.createObjectURL(blob);
				document.body.appendChild(elink);//将<a>元素添加到文档中，并模拟点击
				elink.click();
				URL.revokeObjectURL(elink.href);//释放URL对象的内存
				document.body.removeChild(elink);//从文档中移除<a>元素
			} else {
				navigator.msSaveBlob(blob, filename);//针对IE浏览器的兼容处理，使用navigator.msSaveBlob()方法将blob对象保存为文件。
			}
		})
		.catch((r) => {
			console.error(r);
		});
}

总之，上述代码通过发送POST请求获取服务器返回的文件数据，并根据浏览器的支持情况，使用不同的方式进行文件下载，以实现通用的下载功能。
或者

// 通用下载方法
export function download(url, params, filename) {
	//根据需要添加文件下载时的样式
    downloadLoadingInstance = Loading.service({ text: "正在下载数据，请稍候", spinner: "el-icon-loading", background: "rgba(0, 0, 0, 0.7)", })
    return service.post(url, params, {
        transformRequest: [(params) => { return tansParams(params) }],
        headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
        responseType: 'blob'
    }).then(async (data) => {
        const isLogin = await blobValidate(data);
        if (isLogin) {
            const blob = new Blob([data])
            saveAs(blob, filename)
        } else {
            const resText = await data.text();
            const rspObj = JSON.parse(resText);
            const errMsg = errorCode[rspObj.code] || rspObj.msg || errorCode['default']
            Message.error(errMsg);
        }
        downloadLoadingInstance.close();
    }).catch((r) => {
        console.error(r)
        Message.error('下载文件出现错误，请联系管理员！')
        downloadLoadingInstance.close();
    })
}

补充：涉及到的参数处理函数

export function tansParams(params) {
  let result = "";
  for (const propName of Object.keys(params)) {
    const value = params[propName];
    var part = encodeURIComponent(propName) + "=";
    if (value !== null && typeof value !== "undefined") {
      if (typeof value === "object") {
        for (const key of Object.keys(value)) {
          if (value[key] !== null && typeof value[key] !== "undefined") {
            let params = propName + "[" + key + "]";
            var subPart = encodeURIComponent(params) + "=";
            result += subPart + encodeURIComponent(value[key]) + "&";
          }
        }
      } else {
        result += part + encodeURIComponent(value) + "&";
      }
    }
  }
  return result;
}

上述代码通过遍历请求参数对象，将参数名和参数值进行编码，并拼接为URL查询字符串的形式。如果参数值是对象类型，则会将对象的属性名和属性值进行编码，并拼接为形如propName[key]=value的字符串。最终返回转换后的URL查询字符串。
这个函数通常用于将请求参数转换为符合URL规范的形式，以便于发送HTTP请求。

补充：涉及到的二进制处理函数

// 验证是否为blob格式
export async function blobValidate(data) {
    try {
        const text = await data.text();//该方法将data对象转换为文本格式
        JSON.parse(text);//尝试将文本数据解析为JSON格式。如果解析成功，说明数据不是Blob格式，而是一个可解析为JSON的字符串
        return false;
    } catch (error) {
        return true;
    }
}

上述代码通过尝试将数据转换为文本，并尝试解析为JSON格式来验证数据是否为Blob格式。如果解析成功，说明数据不是Blob格式，返回false；如果解析失败，说明数据是Blob格式，返回true。
这个函数通常用于判断数据类型，以便在不同的情况下采取不同的处理方式。

2、方法的使用

首先在main.js中引入该方法

import { download } from "@/utils/request";
// 全局方法挂载
Vue.prototype.download = download;

然后通过事件触发使用该方法

/** 导出按钮操作 */
handleExport() {
     this.download('project/using_device_client/export', //接口url
     {
          ...this.queryParams//参数
     }, 
     `project_CoUsingDeviceClient.xlsx`)//文件名
 },