第一种:路径拼接参数新开窗口下载
//common/js/methods
// get请求拼路径
export function urlEncode(param, key, encode) {
if (param == null) return ‘’;
var paramStr = ‘’;
var t = typeof param;
if (t == ‘string’ || t == ‘number’ || t == ‘boolean’) {
paramStr +=
‘&’ +
key +
‘=’ +
(encode == null || encode ? encodeURIComponent(param) : param);
} else {
for (var i in param) {
var k =
key == null
? i
: key + (param instanceof Array ? ‘[’ + i + ‘]’ : ‘.’ + i);
paramStr += urlEncode(param[i], k, encode);
}
}
return paramStr;
}
使用:
import { urlEncode } from “@/common/js/methods”;
//导出 下载
let params = {
type: 1,
taskId: 21
}
let judgeItems = urlEncode(params).slice(1); //对传递参数进行拼接
console.log(params, '导出-judgeItems ', judgeItems);
let url = /bs-user-differ/backend/basicSource/exportBasicSource?${judgeItems}
;
window.open(url);
第二种 通过方法获取到流 然后将流放到a标签 下载 然后释放a标签
请求成功后
instance.interceptors.response.use(res => {
if (res.config.responseType) {
console.log(‘下载文件…’)
return {response, res}
}
})
//通过方法下载
async clickExportLoad(){
let id = 1 //参数
let blob = await this.$Http.downloadData(null, id, false, 1, {responseType: ‘blob’})
if (blob) {
let a = document.createElement(‘a’)
a.href = URL.createObjectURL(blob.response)
a.target = ‘_blank’
a.download = ‘文件名称’
document.body.appendChild(a)
a.click()
document.body.removeChild(a)
}
}
第三种 已知下载路径和文件名
/**
- 获取页面文件名
- @param url 文件url
*/
export function downloadUrlFile(url, fileName) {
url = url.replace(/\/g, ‘/’);
const xhr = new XMLHttpRequest();
xhr.open(‘GET’, url, true);
xhr.responseType = ‘blob’;
//xhr.setRequestHeader(‘Authorization’, ‘Basic a2VybWl0Omtlcm1pdA==’);
xhr.onload = () => {
if (xhr.status === 200) {
// 获取文件blob数据并保存
saveAs(xhr.response, fileName);
}
};
xhr.send();
}
/**
- URL方式保存文件到本地
- @param data 文件的blob数据
- @param name 文件名
*/
export function saveAs(data, name) {
var urlObject = window.URL || window.webkitURL || window;
var export_blob = new Blob([data]);
var save_link = document.createElementNS(‘http://www.w3.org/1999/xhtml’, ‘a’);
save_link.href = urlObject.createObjectURL(export_blob);
save_link.target = ‘_parent’;
save_link.download = name;
save_link.click();
}
//使用 引入js { downloadUrlFile }
downloadUrlFile(文件路径, 文件名)