let
blob
= new
Blob
([res.data], {
type: "application/vnd.ms-excel",
}); // 2.获取请求返回的response对象中的
blob
设置文件类型,这里以excel为例
let url = window.URL.createObjectURL(bl
我之前有写过一篇就关于vue
下载
文件的,那个是很好用,但那个是基于我项目中是比较合适的,但实际上,项目中还有一个方法就是
使用
js中
Blob
,这个是什么那,其实无论是fetch还是axios都有提供
Blob
的功能,这个就是把后端返回来的数据文本或者二进制流的数据,转换成字节,返回成一个新的
blob
对象,再去
进行
下载
。
代码示例:
this.$api.Business.download({}, res => {
// 我这个是
下载
的word文档,第二个参数会这样写的
本文用于多个文件批量
下载
,提供两种
下载
方式 (二者利弊自行考量)
1. 将文件文件全部
下载
到本地文件夹,之后将文件夹打包成
zip
最后输出到浏览器再删除文件夹跟
zip
文件利用本地磁盘作为过渡
2. 直接在代码中拿到全部文件的byte[]数组之后,将文件的byte[]数组全部装入
zip
文件流,最后将
zip
文件流输出到浏览器,全过程不产生实体文件到磁盘中。
前端调用方式: 前端调用接口方式本文是直接通过 window.location.href 方式调用接口地址 或通过以下js方式调用本文不做叙述自行了
在计算机中,
BLOB
常常是数据库中用来存储二进制文件的字段类型。
BLOB
是一个大文件,典型的
BLOB
是一张图片或一个声音文件,由于它们的尺寸,必须
使用
特殊的方式来处理(例如:上传、
下载
或者存放到一个数据库)。
根据Eric Raymond的说法,处理
BLOB
的主要思想就是让文件处理器(如数据库管理器)不去理会文件是什么,而是关心如何去处理它。
但也有专家强调,这种处理大数据对象的
后端返回数据类型为
blob
(二进制大对象)
下载
文件时
前端代码如下: axios请求接口=> 指定接受
blob
类型=> 解析
blob
类型=>创建dom A标签
下载
。
使用
:import 导入本模块 引入 downLoad
Zip
(str,filename)方法 参数str为接口地址,filename为
下载
文件的名称
import axios from 'axios'
import { getToken } from '@/utils/auth'
const mimeMap = {
在前端
下载
文件是个很通用的需求,一般后端会提供
下载
的方式有两种:1.直接返回文件的网络地址(一般用在静态文件上,比如图片以及各种音视频资源等)2.返回文件流(一般用在动态文件上,比如根据前端选择,导出不同的统计结果 excel 等)第一种方式比较简单,但是
使用
场景有限。第二种方式通用性更好。
blob
转file
url: "api/TemplateDownload/GetAllTemplate
ZIP
",
headers: {
"content-type": "application/json; charset=utf-8",
Authorization: Cookies.get("token") || "",
当
使用
JavaScript
的
Blob
对象
下载
docx
格式文件
并尝试打开时出现错误,可能存在一些潜在的问题。
首先,确保你正确生成了
docx
文件的
Blob
对象。可以通过创建一个新的
Blob
对象,并将相关内容写入其中,然后设置相应的文件类型为 "application/vnd.openxmlformats-officedocument.wordprocessingml.document",以确保正确的文件格式。
其次,检查浏览器的兼容性。某些较旧的浏览器可能不支持直接打开
docx
文件。在这种情况下,你可以尝试
下载
文件后,
使用
外部的软件(如 Microsoft Word)打开该文件。
另外,确保你
使用
的编辑器或生成
docx
文件的库不会引发任何错误。如果某个错误显示在浏览器的控制台中,尝试查找它并解决问题。
最后,如果以上解决方案都没有起作用,也可以尝试
使用
其他的库或方法来处理
docx
文件。例如,可以
使用
FileSaver.js 库,该库专门用于在浏览器端保存文件。
总结来说,解决
JavaScript
下载
并打开
docx
文件的错误需要确保正确生成
Blob
对象,检查浏览器的兼容性,排除库或编辑器的错误,并尝试其他方法或库来
进行
处理。挖掘和解决问题的具体方法可能取决于具体的代码和环境。