React下载实现及下载工具封装

目录

一、需求

二、实现方法

（一）、使用a链接进行下载。

rel：

代码： 

解释：

（二）、使用封装好的工具类进行下载。

Blob：

封装：

解读：

使用：

---

一、需求

        博主在开发新功能时，遇到了两个问题，第一个是文件下载，第二个是websocket实时通信推送日志，也就是所谓的Tcp。本篇文章我先着重讲解一下文件下载如何实现，以及文件下载的工具类封装，大家可以直接复制粘贴到自己的项目中使用。

二、实现方法

（一）、使用a链接进行下载。

        在了解这个方法以前，我们需要了解一下a链接的rel属性。

rel：

属性值	描述
noopener	指示浏览器打开链接而不授予新的浏览上下文对打开它的文档的访问权限-通过在打开的窗口中不设置Window.opener属性（返回null）。 当打开不受信任的链接时，这特别有用，以确保它们无法通过Window.opener属性来篡改原始文档（有关更多详细信息，请参阅 About rel=noopener），同时仍提供 Referer HTTP标头（除非也使用noreferrer）。 请注意，使用noopener时，在决定是否打开新窗口/选项卡方面，除_top，_self和_parent 以外的非空目标名称都被视为_blank 。
noreferrer	阻止浏览器导航到另一个页面时，通过Referer：HTTP header将该页面地址或任何其他值作为Referrer发送。（在Firefox 37之前的Firefox中，此功能仅在页面中找到的链接中有效。在UI中单击的链接（例如通过上下文菜单“在新选项卡中打开”）被忽略了）。

代码： 

{list.map(item => {
                  return (
                    <p key={item.file_name}>
                      <a
                      
                        rel="noopener noreferrer"
                        target="_blank"
                        href={item.file_url}
                      >
                        {item.file_name}
                      </a>
                    </p>
                  );
                })}

解释：

        target=“_blank”属性为新开页。

        href=“”为后端返回的地址链接。

        a链接包裹的file_name为文件名称。

（二）、使用封装好的工具类进行下载。

        当然，在实现这个工具类以前，希望大家能对这个类之中一个非常关键的属性Blob，有一个大致的了解。这里推荐一位大佬的博文。

Blob：

Javascript中Blob介绍_Arambler的博客-CSDN博客_blob javascriptBlob（Binary Large Object）表示二进制类型的大对象。在数据库管理系统中，将二进制数据存储为一个单一个体的集合。Blob 通常是影像、声音或多媒体文件。在 JavaScript 中 Blob 类型的对象表示不可变的类似文件对象的原始数据。 为了更直观的感受 Blob 对象，我们先来使用 Blob 构造函数，创建一个 myBlob 对象，具体如下图所示：如你所见，myBlob 对象含有两个属性：size 和 type。其中 属性用于表示数据的大小（以字节为单位）， 是 MIME 类型的https://blog.csdn.net/yaojiqic/article/details/125090825?ops_request_misc=&request_id=&biz_id=102&utm_term=js%E4%B8%ADblob%E6%95%B0%E6%8D%AE%E7%B1%BB%E5%9E%8B&utm_medium=distribute.pc_search_result.none-task-blog-2~all~sobaiduweb~default-1-125090825.142%5Ev59%5Epc_rank_34_1,201%5Ev3%5Eadd_ask&spm=1018.2226.3001.4187

封装：

/* eslint-disable no-shadow */
/* eslint-disable no-void */
/* eslint-disable no-unused-expressions */
/* eslint-disable no-underscore-dangle */
import axios from 'axios';
import cookie from './cookie';

function _download(content, fileName) {
  const blob = new Blob([content]);
  const url = window.URL.createObjectURL(blob);
  const dom = document.createElement('a');
  dom.style.display = 'none';
  dom.href = url;
  dom.setAttribute('download', fileName);
  document.body.appendChild(dom);
  dom.click();
}

export default function download(url, fileName, options) {
  const defaultOptions = {
    credentials: 'include'
  };
  const newOptions = {
    ...defaultOptions,
    ...options
  };
  const headers = newOptions.headers || {};

  newOptions.headers = {
    ...headers
  };
  newOptions.url = url;
  const token = cookie.get('token');
  if (token) {
    newOptions.headers.Authorization = `GRJWT ${token}`;
  }
  newOptions.responseType = 'blob';
  newOptions.method = 'get';
  axios(newOptions).then(res => {
    const reader = new FileReader();
    const { data } = res;
    reader.onload = () => {
      _download(data, fileName);
    };
    reader.readAsText(data);
  });
}

解读：

这里需要注意的是_download函数。

        首先将传进来的Url，用于创建对象Url，然后赋值给标签或者使用xhr (XMLHttpRequest)进行下载。

        而后就是一些js的基本语法，创建a标签，a标签隐藏，指定a标签的href属性，最后添加并点击。

        还涉及到token的一些验证，这里根据自己的需求考虑要不要保留。

使用：

先从工具包中引入该工具。

import download from '@/utils/download';

再进行传参使用。 

  downloadLogs = () => {
    
    // 参数一，后端指定的文件下载地址。
    // 参数二，设置下载文件的文件名
    download("/console/enterprise/download/goodrain_log", 'goodrain.log')

  }

以上就是react实现下载的两种方法，如有错误，欢迎指正。