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

前端下载文件的几种方式 使用Blob下载文件
在前端下载文件是个很通用的需求,一般后端会提供下载的方式有两种:
1.直接返回文件的网络地址(一般用在静态文件上,比如图片以及各种音视频资源等)
2.返回文件流(一般用在动态文件上,比如根据前端选择,导出不同的统计结果 excel 等)

第一种方式比较简单,但是使用场景有限。
第二种方式通用性更好

我们先一下第一种的使用场景:

- a链接

<a href="https://www.baidu.top.pdf">下载文件</a>

我们可以通过download属性,可以实现对下载的文件进行重命名。

<a href="https://www.baidu.top.pdf" download="附件.pdf">下载文件</a>

- 还可以使用编程式的写法:

1.location的href

<script>function Download() {window.location.href = 'www.baidu.pdf'}
</script>

2.window.open

<script>function Download() {window.open('www.baidu.pdf')}
</script>

亿点小知识:在使用window.open的时候在除Google Chrome 浏览器会拦截内容但在其他浏览器是可以直接下载的

  • 如果要想Google Chrome 设置里面更改

第二种 使用blob文件流下载

  <script>function Download() {axios({url: "www.baidu.pdf",method: 'GET',responseType: 'blob', // 这里就是转化为blob文件流,指定响应类型为二进制数据headers: {// 'Content-Type': 'application/json; application/octet-stream',token: 'sss'     // 可以携带token}}).then(res => {const href = URL.createObjectURL(res.data)const link = document.createElement('a')link.download = '附件.pdf'link.href = hreflink.click()document.body.removeChild(link);URL.revokeObjectURL(href); // 释放内存})}</script>

下面封装了一个 blob的方法逻辑 感兴趣的可以参考一下

 // 下载const DownloadFile = (row: any) => {contractApi.xxxApi({ fullFileName: row.filePath }).then((blob: any) => {row.fileFormat = row.filePath.split('.')[row.filePath.split('.').length - 1]download(blob, row.fileFormat, row.fileName)})}// file:文件流(一般指后端返回的流); fileType:文件类型/MIME类型;fileName:文件名称
export function download(file: any, fileType: string, fileName?: string) {const blob = new Blob([file], { fileType})const downloadElement = document.createElement('a')const href = window.URL.createObjectURL(blob) // 创建下载的链接downloadElement.href = hrefdownloadElement.download = fileName // 下载后文件名document.body.appendChild(downloadElement)downloadElement.click() // 点击下载document.body.removeChild(downloadElement) // 下载完成移除元素window.URL.revokeObjectURL(href) // 释放掉blob对象
}// 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

let myBlobParts = ['<html><h2>Hello Semlinker</h2></html>']; // an array consisting of a single DOMString
let myBlob = new Blob(myBlobParts, {type : 'text/html', endings: "transparent"}); // the blobconsole.log(myBlob.size + " bytes size");
// Output: 37 bytes size
console.log(myBlob.type + " is the type");
// Output: text/html is the type

示例二:从类型化数组和字符串创建 Blob

let hello = new Uint8Array([72, 101, 108, 108, 111]); // 二进制格式的 "hello"
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 方法对大文件进行切割,然后分片进行上传,具体示例如下:

?
const file = new File(["".repeat(1000000)], "test.txt");const chunkSize = 40000;
const url = "https://httpbin.org/post";async function chunkedUpload() {for (let start = 0; start < file.size; start += chunkSize) {const chunk = file.slice(start, start + chunkSize + 1);const fd = new FormData();fd.append("data", chunk);await fetch(url, { method: "post", body: fd }).then((res) =>res.text());}
}
3.2 从互联网下载数据

我们可以使用以下方法从互联网上下载数据并将数据存储到 Blob 对象中,比如:

const downloadBlob = (url, callback) => {const xhr = new XMLHttpRequest()xhr.open('GET', url)xhr.responseType = 'blob'// xhr.headers = { 'Content-Type': 'application/json; application/octet-stream' },xhr.onload = () => {callback(xhr.response)}xhr.send(null)
}

当然除了使用XMLHttpRequestAPI 之外,我们也可以使用fetchAPI 来实现以流的方式获取二进制数据。这里我们来看一下如何使用 fetch API 获取线上图片并本地显示,具体实现如下:

const myImage = document.querySelector('img');
const myRequest = new Request('flowers.jpg');fetch(myRequest)
.then(function(response) {return response.blob();
})
.then(function(myBlob) {let objectURL = URL.createObjectURL(myBlob);myImage.src = objectURL;
});

当 fetch 请求成功的时候,我们调用 response 对象的blob()方法,从 response 对象中读取一个 Blob 对象,然后使用createObjectURL()方法创建一个 objectURL,然后把它赋值给img元素的src属性从而显示这张图片。·

3.3blob转file
        let obj = {age: 18,sex: '男'}let content = JSON.stringify(obj)// blob类型let blob = new Blob([content], {type: 'application/json'})// 将blob转成urllet url = URL.createObjectURL(blob) //blob:null/244bec7f-e3d3-43d5-803e-f98cc5c8117f  =>链接里面的数据就是右边的内容 {"age":18,"sex":"男"}console.log(url)//blob转filelet filename = '文件名'var file = new File([blob], filename, {type: 'application/json',lastModified: Date.now()});//或者var file1 = new File([content], filename, {type: 'application/json',lastModified: Date.now()});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

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Blob 文件下载示例</title>
</head><body><button id="downloadBtn">文件下载</button><script src="index.js"></script>
</body>
</html>

index.js

const download = (fileName, blob) => {const link = document.createElement("a");link.href = URL.createObjectURL(blob);link.download = fileName;link.click();link.remove();URL.revokeObjectURL(link.href);
};const downloadBtn = document.querySelector("#downloadBtn");
downloadBtn.addEventListener("click", (event) => {const fileName = "blob.txt";const myBlob = new Blob(["一文彻底掌握 Blob Web API"], { type: "text/plain" });download(fileName, myBlob);
});

在示例中,我们通过调用 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 编码之后再进行嵌入。比如嵌入一张图片:

logo

**但需要注意的是:如果图片较大,图片的色彩层次比较丰富,则不适合使用这种方式,因为该图片经过 base64 编码后的字符串非常大,会明显增大 HTML 页面的大小,从而影响加载速度。**除此之外,利用 FileReader API,我们也可以方便的实现图片本地预览功能,具体代码如下:

<input type="file" accept="image/*" onchange="loadFile(event)">
<img id="output"/><script>
const loadFile = function(event) {const reader = new FileReader();reader.onload = function(){const output = document.querySelector('output');output.src = reader.result;};reader.readAsDataURL(event.target.files[0]);
};
</script>

在以上示例中,我们为 file 类型输入框绑定onchange事件处理函数loadFile,在该函数中,我们创建了一个 FileReader 对象并为该对象绑定onload相应的事件处理函数,然后调用 FileReader 对象的readAsDataURL()方法,把本地图片对应的 File 对象转换为 Data URL。·

在完成本地图片预览之后,我们可以直接把图片对应的 Data URLs 数据提交到服务器。针对这种情形,服务端需要做一些相关处理,才能正常保存上传的图片,这里以 Express 为例,具体处理代码如下:

const app = require('express')();app.post('/upload', function(req, res){let imgData = req.body.imgData; // 获取POST请求中的base64图片数据let base64Data = imgData.replace(/^data:image/w+;base64,/, "");let dataBuffer = Buffer.from(base64Data, 'base64');fs.writeFile("image.png", dataBuffer, function(err) {if(err){res.send(err);}else{res.send("图片上传成功!");}});
});

对于 FileReader 对象来说,除了支持把 Blob/File 对象转换为 Data URL 之外,它还提供了readAsArrayBuffer()readAsText()方法,用于把 Blob/File 对象转换为其它的数据格式。这里我们来看个readAsArrayBuffer()的使用示例:

// 从 blob 获取 arrayBuffer
let fileReader = new FileReader();fileReader.onload = function(event) {let arrayBuffer = fileReader.result;    
};
fileReader.readAsArrayBuffer(blob);

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/494725.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

智能座舱进阶-应用框架层-Jetpack主要组件

Jetpack的分类 1. DataBinding&#xff1a;以声明方式将可观察数据绑定到界面元素&#xff0c;通常和ViewModel配合使用。 2. Lifecycle&#xff1a;用于管理Activity和Fragment的生命周期&#xff0c;可帮助开发者生成更易于维护的轻量级代码。 3. LiveData: 在底层数据库更…

知乎 PB 级别 TiDB 数据库集群管控实践

以下文章来源于知乎技术专栏 &#xff0c;作者代晓磊 导读 在现代企业中&#xff0c;数据库的运维管理至关重要&#xff0c;特别是面对分布式数据库的复杂性和大规模集群的挑战。作为一款兼容 MySQL 协议的分布式关系型数据库&#xff0c;TiDB 在高可用、高扩展性和强一致性方…

SpringBoot 自动装配原理及源码解析

目录 一、引言 二、什么是 Spring Boot 的自动装配 三、自动装配的核心注解解析 3.1 SpringBootApplication 注解 &#xff08;1&#xff09;SpringBootConfiguration&#xff1a; &#xff08;2&#xff09;EnableAutoConfiguration&#xff1a; &#xff08;3&#xf…

C++中的字符串实现

短字符串优化(SSO) 实现1 实现2 写时复制 #define _CRT_SECURE_NO_WARNINGS #include<iostream> #include<cstdio> #include<cstring> #include<cstring> using std::cout; using std::endl;// 引用计数存放的位置 // 1. 存放在栈上 --- 不行 // 2. 存…

Linux 基本使用和程序部署

1. Linux 环境搭建 1.1 环境搭建方式 主要有 4 种&#xff1a; 直接安装在物理机上。但是Linux桌面使用起来非常不友好&#xff0c;所以不建议。[不推荐]。使用虚拟机软件&#xff0c;将Linux搭建在虚拟机上。但是由于当前的虚拟机软件(如VMWare之类的)存在一些bug&#xff…

环网冗余CAN转光纤 CAN光端机在风电项目应用

在风力发电项目中&#xff0c;所有的风机内部的状态都需要能够在中控室备被监控到&#xff0c;不论是风机的工作状态还是风机内部的消防状态&#xff0c;以便中控室的工作人员都够根据观测到的信息及时的做出反应&#xff0c;避免造成重大损失。 通常风机的工作信息通过将网口…

ubuntu 如何重装你的apt【apt-get报错: symbol lookup error/undefined symbol】

副标题:解决error:apt-get: symbol lookup error: /lib/x86_64-linux-gnu/libapt-private.so.0.0: undefined symbol: _ZNK13pkgTagSection7FindULLENS_3KeyERKy, version APTPKG_6.0 文章目录 问题描述报错分析解决方案:重装你的apt1、查看你的ubuntu版本2、下载适配你的ap…

网络管理 详细讲解

讲一下之前获取CPU的&#xff0c;其余的原理和这个一样 python代码 app.route(/cpu/) def cpu_used():cpuoidObjectType(ObjectIdentity(myOIDs[cpu_loads]))ret getTableRows((cpuoid,))cpuload0for i in ret:cpuload i[0]print(cpuload)return {cpu:cpuload} var dom do…

用Python PySide6 复刻了两软件UI 做下练习

图样 1 代码 1&#xff1a; # -*- coding: utf-8 -*-import sys from PySide6.QtCore import (QCoreApplication, QMetaObject, QRect, QDate) from PySide6.QtGui import QIcon, QPixmap, QColor from PySide6.QtWidgets import (QApplication, QDialog, QLineEdit, QPushBut…

【day14】异常处理与Object类深入解析

【day13】回顾 在深入探讨异常处理与Object类之前&#xff0c;让我们回顾一下【day13】中的关键内容&#xff1a; 权限修饰符&#xff1a; public&#xff1a;最广的访问范围&#xff0c;任何地方都可以访问。protected&#xff1a;在同包和子类中可以访问。默认&#xff08;无…

题解 洛谷 Luogu P1135 奇怪的电梯 广度优先搜索 BFS C/C++

题目传送门&#xff1a; P1135 奇怪的电梯 - 洛谷 | 计算机科学教育新生态https://www.luogu.com.cn/problem/P1135思路&#xff1a; 一道比较裸的 BFS&#xff0c;就是把走迷宫每次搜周围相邻四格&#xff0c;改成了楼层每次搜上下方向的某层而已 感觉这个题难度只有普及- …

苏黎世联邦理工学院与加州大学伯克利分校推出MaxInfoRL:平衡内在与外在探索的全新强化学习框架

每周跟踪AI热点新闻动向和震撼发展 想要探索生成式人工智能的前沿进展吗&#xff1f;订阅我们的简报&#xff0c;深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同&#xff0c;从行业内部的深度分析和实用指南中受益。不要错过这个机会&#xff0c;成为AI领…

第146场双周赛:统计符合条件长度为3的子数组数目、统计异或值为给定值的路径数目、判断网格图能否被切割成块、唯一中间众数子序列 Ⅰ

Q1、统计符合条件长度为3的子数组数目 1、题目描述 给你一个整数数组 nums &#xff0c;请你返回长度为 3 的子数组&#xff0c;满足第一个数和第三个数的和恰好为第二个数的一半。 子数组 指的是一个数组中连续 非空 的元素序列。 2、解题思路 我们需要在给定的数组 nums…

【RAG实战】Prompting vs. RAG vs. Finetuning: 如何选择LLM应用选择最佳方案

在构建基于大型语言模型&#xff08;LLM&#xff09;的应用时&#xff0c;通常不可能立即使用模型而无需任何调整。为了保持高实用性&#xff0c;我们可以选择以下几种方法之一&#xff1a; Prompt Engineering&#xff08;提示工程&#xff09;Fine-tuning&#xff08;微调&a…

Odoo:免费开源ERP的AI技术赋能出海企业电子商务应用介绍

概述 伴随电子商务的持续演进&#xff0c;客户对于便利性、速度以及个性化服务的期许急剧攀升。企业务必要探寻创新之途径&#xff0c;以强化自身运营&#xff0c;并优化购物体验。达成此目标的最为行之有效的方式之一&#xff0c;便是将 AI 呼叫助手融入您的电子商务平台。我们…

如何打造用户友好的维护页面:6个创意提升WordPress网站体验

在网站运营中&#xff0c;无论是个人博主还是大型企业网站的管理员&#xff0c;难免会遇到需要维护的情况。无论是服务器迁移、插件更新&#xff0c;还是突发的技术故障&#xff0c;都可能导致网站短暂无法访问。这时&#xff0c;设计维护页面能很好的缓解用户的不满&#xff0…

定位方式:css

使用相对路径 div ul #div下的所有ul&#xff0c;空格表示相对路径&#xff08;这个实际中用的多一些&#xff09; 绝对路径-一般不用绝对路径 html>head>div&#xff0c;“>”表示根路径 使用class名称定位 使用.表示 使用id定位 使用#表示 使用属性定位 [属性名…

【YashanDB知识库】jdbc查询st_geometry类型的数据时抛出YAS-00101错误

本文内容来自YashanDB官网&#xff0c;原文内容请见 https://www.yashandb.com/newsinfo/7802956.html?templateId1718516 问题现象 某客户的业务在通过YashanDB jdbc驱动查询含有st_geometry列的数据时&#xff0c;报如下异常&#xff1a;YAS-00101 cannot allocate 0 byte…

[Unity]Unity集成NuGet-连接mysql时的发现

本次使用软件信息&#xff1a; Unity&#xff1a;2022.3.34f1c1。 mysql&#xff1a;mysql 8.0 安装于远程服务器。 使用插件&#xff1a;NuGetForUnity4.1.1.unitypackage 点击名称可前往下载界面。 一、导入插件 打开Unity的时候可直接双击导入道assets。导入后如下图&…

重温设计模式--外观模式

文章目录 外观模式&#xff08;Facade Pattern&#xff09;概述定义 外观模式UML图作用 外观模式的结构C 代码示例1C代码示例2总结 外观模式&#xff08;Facade Pattern&#xff09;概述 定义 外观模式是一种结构型设计模式&#xff0c;它为子系统中的一组接口提供了一个统一…