公共Hooks封装文件下载useDownloadFile实例详解
更新时间：2022年11月25日 15:00:05 作者：JasonSubmara
这篇文章主要为大家介绍了公共Hooks封装文件下载useDownloadFile实例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
引言
对于经常需要开发企业管理后台的前端开发来说，必不可少的需要使用表格对于数据进行操作，在对于现有项目进行代码优化时，封装一些公共的Hooks.
本篇文章为useDownloadFile.js
基于个人项目环境进行封装的Hooks，仅以本文介绍封装Hooks思想心得，故相关代码可能不适用他人
项目环境
Vue3.x + Ant Design Vue3.x + Vite3.x
对于企业管理后台中常见的各类资源文件（图片、文档、音视频等），下载保存本地则是再正常不过的需求了，为保证统一性和避免每个单页面文件内重复书写冗余代码，封装此方法
封装前提：各方法对比
| 方法 | 操作原理 | 优点 | 缺点 |
|---|---|---|---|
| form 表单 | 动态生成一个表单，利用表单提交的功能来实现文件的下载 | 兼容性好，不会出现URL长度限制问题 | 无法知道下载的进度，用户体验交互差 无法直接下载浏览器可直接预览的文件类型 |
| window.open / location.href | 打开新标签页访问下载资源 | 简单粗暴 | 会出现URL长度限制问题 无法知道下载的进度，用户体验交互差 无法直接下载浏览器可直接预览的文件类型 需要注意url编码问题 不能添加header，也就不能进行鉴权 |
| <a /> download 属性 | 利用a标签原生访问属性，附加新增的download属性，使用浏览器进行下载 | 简单粗暴且可下载正常预览文件 | 不能下载跨域地址文件 IE/Edge内兼容问题 无法鉴权 |
| Blob 对象 | 发请求获取二进制数据，转化为Blob对象，利用URL.createObjectUrl生成url地址，赋值在a标签的href属性上，结合download进行下载 | 能解决不能直接下载浏览器可浏览的文件 可以鉴权 | IE10以下不可用 Safari使用情况可能有问题 |
综上并结合实际项目，最后使用Blob对象进行封装下载文件方法
封装分解：下载核心代码
xhr.onloadend = function (e) {
if (e.target.status === 200 || e.target.status === 304) {
const aElement = document.createElement('a');
const blob = e.target.response;
const url = window.URL.createObjectURL(blob);
aElement.style.display = 'none';
aElement.href = url;
aElement.download = `${options.fileName}.${fileType}`;
document.body.appendChild(aElement);
aElement.click();
if (window.URL) {
window.URL.revokeObjectURL(blob);
} else {
window.webkitURL.revokeObjectURL(blob);
}
document.body.removeChild(aElement);
}
};
xhr.send();
封装分解：用户体验设计
- 下载过程中，配合项目使用的Ant Design Vue框架，可以加强用户感知文件下载进度，
- 为防止用户暴力点击，重复触发下载的问题，使用Loading Flag标识，
- 下载失败后，提示用户，重新下载
createVNode('div', {}, ['文件下载过程中请勿关闭当前页面']),
createVNode('div', { className: 'mt-2' }, [`当前下载进度 ${progress.value}%`]),
catch (e) {
console.error(e);
downloading = false;
infoModal && infoModal.destroy();
Modal.error({
title: '提示',
content: '下载发生异常，请重试',
});
}
useDownloadFile.js完整代码
import { createVNode, ref, onBeforeUnmount } from 'vue';
import { Modal } from 'ant-design-vue';
export function useDownloadFile() {
let xhr = null;
let downloading = false; // 限制同一文件同时触发多次下载
let infoModal;
onBeforeUnmount(() => {
xhr && xhr.abort();
});
const downloadFile = options => {
try {
if (downloading || !options.url || !options.fileName) return;
downloading = true;
options.url = options.url.replace('http://', 'https://');
const progress = ref(0);
const fileType = options.url.split('.').pop();
xhr = new XMLHttpRequest();
xhr.responseType = 'blob';
xhr.open('get', options.url, true);
infoModal = Modal.info({
title: '文件下载',
okText: '取消下载',
content: () => {
return createVNode('div', {}, [
createVNode('div', {}, ['文件下载过程中请勿关闭当前页面']),
createVNode('div', { className: 'mt-2' }, [`当前下载进度 ${progress.value}%`]),
]);
},
onOk() {
xhr.abort();
return Promise.resolve();
},
});
xhr.onprogress = function (e) {
progress.value = Math.floor((e.loaded / e.total) * 100);
if (progress.value === 100) {
downloading = false;
infoModal.destroy();
}
};
xhr.onloadend = function (e) {
if (e.target.status === 200 || e.target.status === 304) {
const aElement = document.createElement('a');
const blob = e.target.response;
const url = window.URL.createObjectURL(blob);
aElement.style.display = 'none';
aElement.href = url;
aElement.download = `${options.fileName}.${fileType}`;
document.body.appendChild(aElement);
aElement.click();
if (window.URL) {
window.URL.revokeObjectURL(blob);
} else {
window.webkitURL.revokeObjectURL(blob);
}
document.body.removeChild(aElement);
}
};
xhr.send();
} catch (e) {
console.error(e);
downloading = false;
infoModal && infoModal.destroy();
Modal.error({
title: '提示',
content: '下载发生异常，请重试',
});
}
};
return {
downloadFile,
};
}以上就是公共Hooks封装文件下载useDownloadFile实例详解的详细内容，更多关于公共Hooks封装文件下载的资料请关注脚本之家其它相关文章！
相关文章
这篇文章主要为大家介绍了前端axios取消请求总结示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-10-10
这篇文章主要介绍了vue中如何使用vue-baberrage生成弹幕，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-12-12
下面小编就为大家分享一篇Vue.js 动态为img的src赋值方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
这篇文章主要为大家详细介绍了vue echarts实现横向柱状图，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-09-09
这篇文章给大家详细介绍了Vue强制组件重新渲染的正确方法,非常的实用,有需要的小伙伴可以参考下2020-02-02
vue vite之LogicFlow安装核心依赖及项目初始化详解
这篇文章主要为大家介绍了vue vite之LogicFlow安装核心依赖及项目初始化详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-01-01
这篇文章主要为大家介绍了结合康熙选秀讲解vue虚拟列表的原理使用，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-07-07
这篇文章主要介绍了vue项目实现img的src动态赋值方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
这篇文章主要介绍了浅谈vue的第一个commit分析，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-06-06
这篇文章主要介绍了vue2从数据变化到视图变化之diff算法图文详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-09-09
最新评论