一、设计说明

web系统的数据导出功能是必备的。
所以，这个功能设计要满足以下要求
1、全局可用。
2、参数：下载的接口地址，查询的报表参数，下载后生成的文件名。

二、代码实现

1、package.json

"file-saver": "2.0.5",

2、ruoyi.js

/**
* 参数处理
* @param {*} params  参数
*/
export function tansParams(params) {let result = ''for (const propName of Object.keys(params)) {const value = params[propName];var part = encodeURIComponent(propName) + "=";if (value !== null && value !== "" && typeof (value) !== "undefined") {if (typeof value === 'object') {for (const key of Object.keys(value)) {if (value[key] !== null && value[key] !== "" && typeof (value[key]) !== 'undefined') {let params = propName + '[' + key + ']';var subPart = encodeURIComponent(params) + "=";result += subPart + encodeURIComponent(value[key]) + "&";}}} else {result += part + encodeURIComponent(value) + "&";}}}return result
}// 验证是否为blob格式
export function blobValidate(data) {return data.type !== 'application/json'
}

3、request.js

response拦截器

  // 二进制数据则直接返回if (res.request.responseType ===  'blob' || res.request.responseType ===  'arraybuffer') {return res.data}

download方法实现

import { Message, Loading } from 'element-ui'
import { tansParams, blobValidate } from "@/utils/ruoyi";
import { saveAs } from 'file-saver'
let downloadLoadingInstance;
export function download(url, params, filename, config) {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',...config}).then(async (data) => {const isBlob = blobValidate(data);if (isBlob) {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();})
}

4、main.js中挂载download方法

import { download } from '@/utils/request'
Vue.prototype.download = download

5、使用案例

Vue文件的methods部分

handleExport(){this.download('system/role/export',{...this.queryParams},`role_${new Date().getTime()}.xlsx`)
}