概要
方法概括:
1. a
标签简单设置 href 方式
2. a
标签使用 blob 数据类型方式
整体代码展示
<el-link
:underline="false"
type="primary"
style="font-size: 12px; margin-left: 10px"
@click="download(scope.row)"
>下载</el-link>
download(row) {
这里拼接了下载地址url 传给封装的getBlob 进行Blob 抛下载方法
let url = row.fileCctpath + row.fileCctkey
this.getBlob(url).then((blob) => {
抛送返回结果传给封装的 saveAs 方法进行更改文件名称下载
blob抛送返回数据 row.fileName 自定义下载名称
this.saveAs(blob, row.fileName);
});
},
这里使用了两种方法进行抛送下载 任选其一即可
返回数据格式都是一致的 size 文件大小 type 文件类型
async getBlob(url) {
第一种 使用了fetch 进行抛送
const response = await fetch(url, {
method: "GET",
credentials: "include",
// mode: "no-cors", // 这里设置为 no-cors
});
if (response.ok) {
return await response.blob();
} else {
throw new Error("Network response was not ok.");
}
第二种 使用了 new XMLHttpRequest() 进行抛送
return new Promise((resolve) => {
const xhr = new XMLHttpRequest();
xhr.open("GET", url, true);
xhr.responseType = "blob";
xhr.withCredentials = true;
xhr.onload = () => {
console.log(xhr, "xhr");
if (xhr.status === 200) {
resolve(xhr.response);
}
};
xhr.send();
});
},
进行文件下载更换自定义文件名
saveAs(blob, filename) {
if (window.navigator.msSaveOrOpenBlob) {
对于 IE 和 Edge
navigator.msSaveBlob(blob, filename);
} else {
对于其他现代浏览器
const link = document.createElement("a");
const body = document.querySelector("body");
link.href = window.URL.createObjectURL(blob);
link.download = filename;
link.style.display = "none";
body.appendChild(link);
link.click();
body.removeChild(link);
释放内存
window.URL.revokeObjectURL(link.href);
}
},
<el-link
:underline="false"
type="primary"
style="font-size: 12px; margin-left: 10px"
@click="download(scope.row)"
>下载</el-link>
第二种方法直接抛送下载 但是有个缺陷 需要是同源 不支持跨域 需要配置跨域
download(row) {
let url = row.fileCctpath + row.fileCctkey
this.saveAs(blob, row.fileName);
},
saveAs(blob,fileName){
这里可以进行 跨域设置
let u =
"/hanmpsc" +
blob.substr(
"你的域名地址".length,
blob.length - "你的域名地址".length
);
let a = document.createElement("a");
a.href = u;
a.download = fileName; //文件名
a.target = "_blank";
a.click();
}
vue.config.js 里进行配置跨域存储桶服务器地址
'/hanmpsc': {
target: 'http://********', // 新存储桶服务器的地址
changeOrigin: true, // 允许跨域
pathRewrite: {
'^/hanmpsc': '', // 去掉路径中的 /srmc
},
}
小结
getBlob(url)
- 功能:该方法用于通过给定的 URL 获取文件的 Blob 对象。
- 参数:
url
:要请求的文件的 URL。
- 实现:
- 创建一个新的
Promise
,用于异步处理。 - 使用
XMLHttpRequest
对象发起一个 GET 请求,请求的响应类型设置为blob
。 - 在请求成功(状态码为 200)时,调用
resolve
方法将响应的 Blob 对象返回。
- 创建一个新的
2. upload(url, name)
- 功能:该方法用于下载指定 URL 的文件,并将其命名为指定的文件名。
- 参数:
url
:要下载的文件的 URL。name
:下载后文件的名称。
- 实现:
- 调用
getBlob(url)
方法获取 Blob 对象。 - 创建一个
<a>
标签,用于触发文件下载。 - 使用
window.URL.createObjectURL(blob)
创建一个指向 Blob 对象的 URL。 - 设置
<a>
标签的href
属性为 Blob URL,download
属性为指定的文件名。 - 将
<a>
标签添加到文档中,并模拟点击以触发下载。 - 下载完成后,移除
<a>
标签,并使用window.URL.revokeObjectURL(url)
释放 Blob URL。
- 调用
- 这段代码的主要目的是通过 AJAX 请求获取文件,并利用 Blob 对象实现文件的下载功能。用户只需提供文件的 URL 和希望保存的文件名,代码便会自动处理下载过程。