公共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封装文件下载的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

Vue3使用indexDB缓存静态资源的示例代码
IndexedDB 是一个浏览器内建的数据库,它可以存放对象格式的数据,默认情况下,浏览器会将自身所在的硬盘位置剩余容量全部作为indexedDB的存储容量,本文给大家介绍了Vue3使用indexDB缓存静态资源,需要的朋友可以参考下
2024-10-10
Vue.js每天必学之方法与事件处理器
Vue.js每天必学之方法与事件处理器，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-09-09
Vuejs第一篇之入门教程详解（单向绑定、双向绑定、列表渲染、响应函数）
组件（Component）是 Vue.js 最强大的功能之一。接下来给大家介绍vuejs单向绑定、双向绑定、列表渲染、响应函数的相关知识，非常不错，感兴趣的朋友一起看看吧
2016-09-09
Vue文件下载进度条的实现过程
这篇文章主要介绍了Vue文件下载进度条的实现原理,通过使用onDownloadProgress方法API获取进度及文件大小等数据，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2022-07-07
vite项目的根目录中的env.d.ts类型声明文件里要写什么
这篇文章主要介绍了vite项目的根目录中的env.d.ts类型声明文件里要写什么,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-08-08
Vue中正确使用Element-UI组件的方法实例
这篇文章主要给大家介绍了关于Vue中正确使用Element-UI组件的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-10-10
Vue模拟实现购物车结算功能
这篇文章主要为大家详细介绍了Vue模拟实现购物车结算功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-09-09
搭建vue3项目以及按需引入element-ui框架组件全过程
element是基于vue.js框架开发的快速搭建前端的UI框架,下面这篇文章主要给大家介绍了关于搭建vue3项目以及按需引入element-ui框架组件的相关资料,文中通过图文以及代码介绍的非常详细,需要的朋友可以参考下
2024-02-02
vue组件中修改组件外元素样式的两种解决方案
这篇文章主要介绍了vue组件中修改组件外元素样式,本文给大家分享两种解决方案帮助大家解决这样的问题，结合实例代码给大家介绍的非常详细，需要的朋友可以参考下
2023-05-05
快速解决vue动态绑定多个class的官方实例语法无效的问题
今天小编就为大家分享一篇快速解决vue动态绑定多个class的官方实例语法无效的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-09-09