前端下载文件的几种方式使用Blob下载文件

罪恶克星  论坛元老 | 2025-1-20 10:17:35 | 显示全部楼层 | 阅读模式
打印 上一主题 下一主题
楼主

主题 1769|帖子 1769|积分 5307

前端下载文件的几种方式 使用Blob下载文件
在前端下载文件是个很通用的需求，一样寻常后端会提供下载的方式有两种：
1.直接返回文件的网络地点（一样寻常用在静态文件上，比如图片以及各种音视频资源等）
2.返回文件流（一样寻常用在动态文件上，比如根据前端选择，导出不同的统计结果 excel 等）
第一种方式比较简朴，但是使用场景有限。
第二种方式通用性更好
我们先一下第一种的使用场景：

- a链接

  1. <a href="https://www.baidu.top.pdf">下载文件</a>
复制代码
我们可以通过download属性，可以实现对下载的文件举行重命名。
  1. <a href="https://www.baidu.top.pdf" download="附件.pdf">下载文件</a>
复制代码
- 还可以使用编程式的写法：

1.location的href
  1. <script>
  2.   function Download() {
  3.     window.location.href = 'www.baidu.pdf'
  4.   }
  5. </script>
复制代码
2.window.open
  1. <script>
  2.   function Download() {
  3.     window.open('www.baidu.pdf')
  4.   }
  5. </script>
复制代码
  亿点小知识：在使用window.open的时候在除Google Chrome 浏览器会拦截内容但在其他浏览器是可以直接下载的
  

  • 如果要想Google Chrome 设置里面更改
  第二种 使用blob文件流下载

  1.   <script>
  2.     function Download() {
  3.       axios({
  4.         url: "www.baidu.pdf",
  5.         method: 'GET',
  6.         responseType: 'blob', // 这里就是转化为blob文件流，指定响应类型为二进制数据
  7.         headers: {
  8.           // 'Content-Type': 'application/json; application/octet-stream',
  9.           token: 'sss'     // 可以携带token
  10.         }
  11.       }).then(res => {
  12.         const href = URL.createObjectURL(res.data)
  13.         const link = document.createElement('a')
  14.         link.download = '附件.pdf'
  15.         link.href = href
  16.         link.click()
  17.         document.body.removeChild(link);
  18.         URL.revokeObjectURL(href); // 释放内存
  19.       })
  20.     }
  21.   </script>
复制代码
下面封装了一个 blob的方法逻辑 感兴趣的可以参考一下
  1. // 下载
  2.   const DownloadFile = (row: any) => {
  3.     contractApi
  4.       .xxxApi({ fullFileName: row.filePath })
  5.       .then((blob: any) => {
  6.         row.fileFormat = row.filePath.split('.')[row.filePath.split('.').length - 1]
  7.         download(blob, row.fileFormat, row.fileName)
  8.       })
  9.   }
  12. // file:文件流(一般指后端返回的流)； fileType:文件类型/MIME类型；fileName:文件名称
  13. export function download(file: any, fileType: string, fileName?: string) {
  14.   const blob = new Blob([file], { fileType})
  15.   const downloadElement = document.createElement('a')
  16.   const href = window.URL.createObjectURL(blob) // 创建下载的链接
  17.   downloadElement.href = href
  18.   downloadElement.download = fileName // 下载后文件名
  19.   document.body.appendChild(downloadElement)
  20.   downloadElement.click() // 点击下载
  21.   document.body.removeChild(downloadElement) // 下载完成移除元素
  22.   window.URL.revokeObjectURL(href) // 释放掉blob对象
  23. }
  25. // download(blobStream,{ 'Content-Type': 'application/vnd.ms-excel;charset=utf-8' })
复制代码
三、Blob

1、Blob 是什么

Blob（Binary Large Object）表示二进制范例的大对象。在数据库管理系统中，将二进制数据存储为一个单一个体的集合。Blob 通常是影像、声音或多媒体文件。**在JavaScript中 Blob 范例的对象表示不可变的类似文件对象的原始数据。**为了更直观的感受 Blob 对象，我们先来使用 Blob 构造函数，创建一个 myBlob 对象，详细如下图所示：

如你所见，myBlob 对象含有两个属性：size 和 type。其中size属性用于表示数据的巨细（以字节为单位），type是 MIME 范例的字符串。Blob 表示的不一定是JavaScript原生格式的数据。比如File接口基于Blob，继承了 blob 的功能并将其扩展使其支持用户系统上的文件。·
2、Blob API 简介

Blob由一个可选的字符串type（通常是 MIME 范例）和blobParts构成：

MIME（Multipurpose Internet Mail Extensions）多用途互联网邮件扩展范例，是设定某种扩展名的文件用一种应用步伐来打开的方式范例，当该扩展名文件被访问的时候，浏览器会自动使用指定应用步伐来打开。多用于指定一些客户端自界说的文件名，以及一些媒体文件打开方式。·
常见的 MIME 范例有：超文本标记语言文本 .html text/html、PNG图像 .png image/png、普通文本 .txt text/plain 等。
2.1 构造函数

Blob 构造函数的语法为：
   var aBlob = new Blob(blobParts, options);
  相关的参数阐明如下：·


  • blobParts：它是一个由 ArrayBuffer，ArrayBufferView，Blob，DOMString 等对象构成的数组。DOMStrings 会被编码为 UTF-8。
  • options：一个可选的对象，包含以下两个属性：

    • type —— 默认值为""，它代表了将会被放入到 blob 中的数组内容的 MIME 范例。
    • endings —— 默认值为"transparent"，用于指定包含行结束符 的字符串如何被写入。它是以下两个值中的一个："native"，代表行结束符会被更改为适合宿主操作系统文件系统的换行符，大概"transparent"，代表会保持 blob 中保存的结束符不变。

示例一：从字符串创建 Blob
  1. let myBlobParts = ['<html><h2>Hello Semlinker</h2></html>']; // an array consisting of a single DOMString
  2. let myBlob = new Blob(myBlobParts, {type : 'text/html', endings: "transparent"}); // the blob
  4. console.log(myBlob.size + " bytes size");
  5. // Output: 37 bytes size
  6. console.log(myBlob.type + " is the type");
  7. // Output: text/html is the type
复制代码

示例二：从范例化数组和字符串创建 Blob
  1. let hello = new Uint8Array([72, 101, 108, 108, 111]); // 二进制格式的 "hello"
  2. let blob = new Blob([hello, ' ', 'semlinker'], {type: 'text/plain'});
复制代码
介绍完 Blob 构造函数，接下来我们来分别介绍 Blob 类的属性和方法：

2.2 属性

前面我们已经知道 Blob 对象包含两个属性：·


  • size（只读）：表示Blob对象中所包含数据的巨细（以字节为单位）。
  • type（只读）：一个字符串，表明该Blob对象所包含数据的 MIME 范例。如果范例未知，则该值为空字符串。
2.3 方法



  • slice([start[, end[, contentType]]])：返回一个新的 Blob 对象，包含了源 Blob 对象中指定范围内的数据。
  • stream()：返回一个能读取 blob 内容的ReadableStream。
  • text()：返回一个 Promise 对象且包含 blob 所有内容的 UTF-8 格式的USVString。
  • arrayBuffer()：返回一个 Promise 对象且包含 blob 所有内容的二进制格式的ArrayBuffer。
这里我们需要注意的是，Blob对象是不可改变的。我们不能直接在一个 Blob 中更改数据，但是我们可以对一个 Blob 举行分割，从其中创建新的 Blob 对象，将它们混淆到一个新的 Blob 中。这种举动类似于 JavaScript 字符串：我们无法更改字符串中的字符，但可以创建新的更正后的字符串。
3、Blob 使用场景

3.1 分片上传

File 对象是特殊范例的 Blob，且可以用在任意的 Blob 范例的上下文中。以是针对大文件传输的场景，我们可以使用 slice 方法对大文件举行切割，然后分片举行上传，详细示例如下：
  1. ?
  2. const file = new File(["".repeat(1000000)], "test.txt");
  4. const chunkSize = 40000;
  5. const url = "https://httpbin.org/post";
  7. async function chunkedUpload() {
  8.     for (let start = 0; start < file.size; start += chunkSize) {
  9.         const chunk = file.slice(start, start + chunkSize + 1);
  10.         const fd = new FormData();
  11.         fd.append("data", chunk);
  13.         await fetch(url, { method: "post", body: fd }).then((res) =>
  14.             res.text()
  15.         );
  16.     }
  17. }
复制代码
3.2 从互联网下载数据

我们可以使用以下方法从互联网上下载数据并将数据存储到 Blob 对象中，比如：
  1. const downloadBlob = (url, callback) => {
  2.     const xhr = new XMLHttpRequest()
  3.     xhr.open('GET', url)
  4.     xhr.responseType = 'blob'
  5.     // xhr.headers = { 'Content-Type': 'application/json; application/octet-stream' },
  6.     xhr.onload = () => {
  7.         callback(xhr.response)
  8.     }
  9.     xhr.send(null)
  10. }
复制代码
固然除了使用XMLHttpRequestAPI 之外，我们也可以使用fetchAPI 来实现以流的方式获取二进制数据。这里我们来看一下如何使用 fetch API 获取线上图片并本地表现，详细实现如下：
  1. const myImage = document.querySelector('img');
  2. const myRequest = new Request('flowers.jpg');
  4. fetch(myRequest)
  5. .then(function(response) {
  6.     return response.blob();
  7. })
  8. .then(function(myBlob) {
  9.     let objectURL = URL.createObjectURL(myBlob);
  10.     myImage.src = objectURL;
  11. });
复制代码
当 fetch 哀求成功的时候，我们调用 response 对象的blob()方法，从 response 对象中读取一个 Blob 对象，然后使用createObjectURL()方法创建一个 objectURL，然后把它赋值给img元素的src属性从而表现这张图片。·
3.3blob转file

  1.         let obj = {
  2.             age: 18,
  3.             sex: '男'
  4.         }
  5.         let content = JSON.stringify(obj)
  6.         // blob类型
  7.         let blob = new Blob([content], {
  8.                 type: 'application/json'
  9.             })
  10.         // 将blob转成url
  11.         let url = URL.createObjectURL(blob) //blob:null/244bec7f-e3d3-43d5-803e-f98cc5c8117f  =>链接里面的数据就是右边的内容 {"age":18,"sex":"男"}
  12.         console.log(url)
  13.         //blob转file
  14.         let filename = '文件名'
  15.         var file = new File([blob], filename, {
  16.             type: 'application/json',
  17.             lastModified: Date.now()
  18.         });
  19.         //或者
  20.         var file1 = new File([content], filename, {
  21.             type: 'application/json',
  22.             lastModified: Date.now()
  23.         });
  24.         console.log("文件", file, file1)
复制代码

3.4Blob 用作 URL

Blob 可以很容易的作为<a>、<img>或其他标签的 URL，多亏了type属性，我们也可以上传/下载Blob对象。下面我们将举一个 Blob 文件下载的示例，不过在看详细示例前我们得简朴介绍一下 Blob URL。
1.Blob URL/Object URL

Blob URL/Object URL 是一种伪协议，允许 Blob 和 File 对象用作图像，下载二进制数据链接等的 URL 源。在浏览器中，我们使用URL.createObjectURL方法来创建 Blob URL，该方法接收一个Blob对象，并为其创建一个唯一的 URL，其情势为blob:<origin>/<uuid>，对应的示例如下：
blob:https://example.org/40a5fb5a-d56d-4a33-b4e2-0acf6a8e5f641
浏览器内部为每个通过URL.createObjectURL生成的 URL 存储了一个 URL → Blob 映射。因此，此类 URL 较短，但可以访问Blob。生成的 URL 仅在当前文档打开的状态下才有效。它允许引用<img>、<a>中的Blob，但如果你访问的 Blob URL 不再存在，则会从浏览器中收到 404 错误。·
上述的 Blob URL 看似很不错，但实际上它也有副作用。虽然存储了 URL → Blob 的映射，但 Blob 自己仍驻留在内存中，浏览器无法开释它。映射在文档卸载时自动打扫，因此 Blob 对象随后被开释。
但是，如果应用步伐寿命很长，那不会很快发生。因此，如果我们创建一个 Blob URL，即使不再需要该 Blob，它也会存在内存中。
针对这个问题，我们可以调用URL.revokeObjectURL(url)方法，从内部映射中删除引用，从而允许删除 Blob（如果没有其他引用），并开释内存。接下
2.Blob 文件下载示例

index.html
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8" />
  5. <title>Blob 文件下载示例</title>
  6. </head>
  8. <body>
  9.     <button id="downloadBtn">文件下载</button>
  10.     <script src="index.js"></script>
  11. </body>
  12. </html>
复制代码
index.js
  1. const download = (fileName, blob) => {
  2.     const link = document.createElement("a");
  3.     link.href = URL.createObjectURL(blob);
  4.     link.download = fileName;
  5.     link.click();
  6.     link.remove();
  7.     URL.revokeObjectURL(link.href);
  8. };
  10. const downloadBtn = document.querySelector("#downloadBtn");
  11. downloadBtn.addEventListener("click", (event) => {
  12.     const fileName = "blob.txt";
  13.     const myBlob = new Blob(["一文彻底掌握 Blob Web API"], { type: "text/plain" });
  14.     download(fileName, myBlob);
  15. });
复制代码
在示例中，我们通过调用 Blob 的构造函数来创建范例为**“text/plain”**的 Blob 对象，然后通过动态创建a标签来实现文件的下载。·
3.5Blob 转换为 Base64

URL.createObjectURL的一个替换方法是，将Blob转换为 base64 编码的字符串。Base64是一种基于 64 个可打印字符来表示二进制数据的表示方法，它常用于在处置惩罚文本数据的场合，表示、传输、存储一些二进制数据，包罗 MIME 的电子邮件及 XML 的一些复杂数据。
在 MIME 格式的电子邮件中，base64 可以用来将二进制的字节序列数据编码成 ASCII 字符序列构成的文本。使用时，在传输编码方式中指定 base64。使用的字符包罗巨细写拉丁字母各 26 个、数字 10 个、加号 + 和斜杠 /，共 64 个字符，等号 = 用来作为后缀用途。
下面我们来介绍如何在HTML中嵌入 base64 编码的图片。在编写 HTML 网页时，对于一些简朴图片，通常会选择将图片内容直接内嵌在网页中，从而减少不须要的网络哀求，但是图片数据是二进制数据，该怎么嵌入呢？绝大多数当代浏览器都支持一种名为Data URLs的特性，允许使用 base64 对图片或其他文件的二进制数据举行编码，将其作为文本字符串嵌入网页中。
Data URLs 由四个部分构成：前缀（data:）、指示数据范例的 MIME 范例、如果非文本则为可选的base64标记、数据自己：
data:[][;base64],
mediatype是个 MIME 范例的字符串，例如 “image/jpeg” 表示 JPEG 图像文件。如果被省略，则默认值为text/plain;charset=US-ASCII。如果数据是文本范例，你可以直接将文本嵌入（根据文档范例，使用符合的实体字符或转义字符）。如果是二进制数据，你可以将数据举行 base64 编码之后再举行嵌入。比如嵌入一张图片：
**但需要注意的是：如果图片较大，图片的色彩层次比较丰富，则不适合使用这种方式，因为该图片经过 base64 编码后的字符串非常大，会明显增大 HTML 页面的巨细，从而影响加载速率。**除此之外，利用 FileReader API，我们也可以方便的实现图片本地预览功能，详细代码如下：
  1. <input type="file" accept="image/*" onchange="loadFile(event)">
  2. <img id="output"/>
  4. <script>
  5. const loadFile = function(event) {
  6.     const reader = new FileReader();
  7.     reader.onload = function(){
  8.         const output = document.querySelector('output');
  9.         output.src = reader.result;
  10.     };
  11.     reader.readAsDataURL(event.target.files[0]);
  12. };
  13. </script>
复制代码
在以上示例中，我们为 file 范例输入框绑定onchange变乱处置惩罚函数loadFile，在该函数中，我们创建了一个 FileReader 对象并为该对象绑定onload相应的变乱处置惩罚函数，然后调用 FileReader 对象的readAsDataURL()方法，把本舆图片对应的 File 对象转换为 Data URL。·
在完成本舆图片预览之后，我们可以直接把图片对应的 Data URLs 数据提交到服务器。针对这种情形，服务端需要做一些相关处置惩罚，才能正常保存上传的图片，这里以 Express 为例，详细处置惩罚代码如下：
  1. const app = require('express')();
  3. app.post('/upload', function(req, res){
  4.     let imgData = req.body.imgData; // 获取POST请求中的base64图片数据
  5.     let base64Data = imgData.replace(/^data:image/w+;base64,/, "");
  6.     let dataBuffer = Buffer.from(base64Data, 'base64');
  7.     fs.writeFile("image.png", dataBuffer, function(err) {
  8.         if(err){
  9.             res.send(err);
  10.         }else{
  11.             res.send("图片上传成功！");
  12.         }
  13.     });
  14. });
复制代码
对于 FileReader 对象来说，除了支持把 Blob/File 对象转换为 Data URL 之外，它还提供了readAsArrayBuffer()和readAsText()方法，用于把 Blob/File 对象转换为其它的数据格式。这里我们来看个readAsArrayBuffer()的使用示例：
  1. // 从 blob 获取 arrayBuffer
  2. let fileReader = new FileReader();
  4. fileReader.onload = function(event) {
  5.     let arrayBuffer = fileReader.result;   
  6. };
  7. fileReader.readAsArrayBuffer(blob);
复制代码
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

本帖子中包含更多资源

您需要 登录 才可以下载或查看，没有账号？立即注册

x
回复

使用道具 举报

0 个回复

倒序浏览
返回列表

快速回复

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

罪恶克星

论坛元老
这个人很懒什么都没写!

楼主热帖

标签云

AI 运维 CIO 存储 服务器
微信订阅号
微信服务号
微信客服
小程序
H5
关于我们 商务合作 网站地图
©Copyright 2022-2024 杭州祥升科技有限公司 版权所有 浙ICP备20004199号
快速回复 返回顶部 返回列表