前端使用JS内置Blob实现下载各种形式的文件实例
|
|
axios调用后端下载接口(在请求体中加上responseType: "blob")- export const fileDownload = (data) =>
- request({
- method: "post",
- url: "/heritage/fileDownload",
- responseType: "blob",
- data,
- });
1.封装下载函数- // data: 接口返回的二进制流数据
- // fileName：自定义下载完成后的文件名
- // fileType：要下载的文件类型
- downloadFile(data, fileName, fileType) {
- let blob = new Blob([data], { type: `${fileType};charset=utf-8`});// type指定下载文件的类型
- let downloadElement = document.createElement("a");
- let href = window.URL.createObjectURL(blob);
- downloadElement.href = href;
- downloadElement.download = fileName;
- document.body.appendChild(downloadElement);
- downloadElement.click();
- document.body.removeChild(downloadElement);
- window.URL.revokeObjectURL(href);
- }
- async courseDownload() {
- // 调用后端接口
- const res = await fileDownload();
- // 此处的fileType可以动态获取响应头中对应的文件名称
- const filename = "测试文件"; // 自定义下载文件名称
- // 此处的fileType可以动态获取响应头中对应的文件类型
- const fileType = "application/zip" // 下载zip格式的文件
-
- this.downloadFile(res, filename, fileType);
- },
到此这篇关于前端使用JS内置Blob实现下载各种形式文件的文章就介绍到这了,更多相关JS内置Blob下载文件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
来源:https://www.jb51.net/javascript/32338834h.htm
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！ |
|
|
|
|
|
发表于 2024-7-5 22:49:14
举报
回复
分享
|
|
|
|
|
