【vue2】前端实现下载后端返回的application/octet-stream文件流

1、下载csv/txt时
此时无须修改接口的响应格式

let filenameRegex = /filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/;
let matches = filenameRegex.exec(data.headers['content-disposition']);
let blob = new Blob(['\uFEFF' + data.data], {//目前只有csv格式type: 'text/csv;charset=utf-8'
})
var downloadElement = document.createElement('a');
var href = window.URL.createObjectURL(blob);
downloadElement.href = href;
downloadElement.download = matches[1].substring(0, matches[1].lastIndexOf('.'));
document.body.appendChild(downloadElement); 
downloadElement.click(); //注销掉
window.URL.revokeObjectURL(href); //清除生成的链接,会占用一些东西,不知道啥,反正运行慢点

2、下载Excel时,需要修改一下接口的响应格式为blob

axios({method: "POST",url: constants.url.QUERY_DESCRIBE_TEST_REPORT_DOWNLOAD,responseType: "blob",//FIXME 很重要timeout: 60000,data: {TestTaskId,},}).then((response) => {console.log("response", response);if (!response || !response.data) {self.$message({type: "error",message: "导出失败!",});return;}let filenameRegex = /filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/;let matches = filenameRegex.exec(response.headers["content-disposition"]);let blob = new Blob([response.data]);let downloadFilename = matches[1];if (window.navigator && window.navigator.msSaveOrOpenBlob) {//兼容ie浏览器window.navigator.msSaveOrOpenBlob(blob, downloadFilename);} else {//谷歌,火狐等浏览器let url = window.URL.createObjectURL(blob);let downloadElement = document.createElement("a");downloadElement.style.display = "none";downloadElement.href = url;downloadElement.download = downloadFilename;document.body.appendChild(downloadElement);downloadElement.click();document.body.removeChild(downloadElement);window.URL.revokeObjectURL(url);}}).catch((err) => {this.$message.error(err);});

{".3gp",    "video/3gpp"},
{".apk",    "application/vnd.android.package-archive"},
{".asf",    "video/x-ms-asf"},
{".avi",    "video/x-msvideo"},
{".bin",    "application/octet-stream"},
{".bmp",    "image/bmp"},
{".c",      "text/plain"},
{".csv",    "text/csv;charset=utf-8"},
{".class",  "application/octet-stream"},
{".conf",   "text/plain"},
{".cpp",    "text/plain"},
{".doc",    "application/msword"},
{".docx",   "application/vnd.openxmlformats-officedocument.wordprocessingml.document"},
{".xls",    "application/vnd.ms-excel"},
{".xlsx",   "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"},
{".exe",    "application/octet-stream"},
{".gif",    "image/gif"},
{".gtar",   "application/x-gtar"},
{".gz",     "application/x-gzip"},
{".h",      "text/plain"},
{".htm",    "text/html"},
{".html",   "text/html"},
{".jar",    "application/java-archive"},
{".java",   "text/plain"},
{".jpeg",   "image/jpeg"},
{".jpg",    "image/jpeg"},
{".js",     "application/x-javascript"},
{".log",    "text/plain"},
{".m3u",    "audio/x-mpegurl"},
{".m4a",    "audio/mp4a-latm"},
{".m4b",    "audio/mp4a-latm"},
{".m4p",    "audio/mp4a-latm"},
{".m4u",    "video/vnd.mpegurl"},
{".m4v",    "video/x-m4v"},
{".mov",    "video/quicktime"},
{".mp2",    "audio/x-mpeg"},
{".mp3",    "audio/x-mpeg"},
{".mp4",    "video/mp4"},
{".mpc",    "application/vnd.mpohun.certificate"},
{".mpe",    "video/mpeg"},
{".mpeg",   "video/mpeg"},
{".mpg",    "video/mpeg"},
{".mpg4",   "video/mp4"},
{".mpga",   "audio/mpeg"},
{".msg",    "application/vnd.ms-outlook"},
{".ogg",    "audio/ogg"},
{".pdf",    "application/pdf"},
{".png",    "image/png"},
{".pps",    "application/vnd.ms-powerpoint"},
{".ppt",    "application/vnd.ms-powerpoint"},
{".pptx",   "application/vnd.openxmlformats-officedocument.presentationml.presentation"},
{".prop",   "text/plain"},
{".rc",     "text/plain"},
{".rmvb",   "audio/x-pn-realaudio"},
{".rtf",    "application/rtf"},
{".sh",     "text/plain"},
{".tar",    "application/x-tar"},
{".tgz",    "application/x-compressed"},
{".txt",    "text/plain"},
{".wav",    "audio/x-wav"},
{".wma",    "audio/x-ms-wma"},
{".wmv",    "audio/x-ms-wmv"},
{".wps",    "application/vnd.ms-works"},
{".xml",    "text/plain"},
{".z",      "application/x-compress"},
{".zip",    "application/x-zip-compressed"},
{"",        "*/*"}

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

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

相关文章

纠缠辅助的量子网络:原理、技术、发展与挑战

7月11日,中国科大网络空间安全学院和陆军院士工作室李忠辉博士为第一作者、薛开平教授为通讯作者的量子网络综述论文“Entanglement-Assisted Quantum Networks: Mechanics, Enabling Technologies, Challenges, and Research Directions”在通信领域知名期刊《IEEE…

Ext JS 之Microloader(微加载器)

“Microloader”是 Sencha 数据驱动的 JavaScript 和 CSS 动态加载器的名称。 清单 app.json 用于应用的设置,Sencha Cmd 在构建的时候会读取这个文件。 Sencha Cmd 转换“app.json”的内容并将生成的清单传递给 Microloader 以在运行时使用。 最后,Ext JS 本身也会查阅运…

什么是cssreset ?为什么要用到cssreset?

1,什么是cssreset ? 顾名思义,css reset,样式重置。即重新设置界面的样式。 CSS reset,又叫做 CSS 重写或者 CSS 重置,用于改写HTML标签的默认样式。 有些HTML标签在浏览器里有默认的样式,例如 p 标签有上…

c++学习之内存管理

目录 1.c/c内存分布 2.new与delete/malloc与free c内存管理方式: new/delete操作内置类型: new/delete操作自定义类型 operator new与operator delete函数 new和delete的实现原理 内置类型 自定义类型 malloc/free和new/delete的区别 1.c/c内存分…

音视频 ffplay命令-高级选项

选项说明-stats打印多个回放统计信息,包括显示流持续时间,编解码器参数,流中的当前位置,以及音频/视频同步差值。默认情况下处于启用状态,要显式禁用它则需要指定-nostats-fast非标准化规范的多媒体兼容优化-genpts生成…

iPhone 14 Pro 动态岛的功能和使用方法详解

当iPhone 14 Pro机型发布时,苹果公司将软件功能与屏幕顶部的药丸状切口创新集成,称之为“灵动岛”,这让许多人感到惊讶。这篇文章解释了它的功能、工作原理,以及你如何与它互动以执行动作。 一、什么是灵动岛?它是如何工作的 在谣言周期的早期‌iPhone 14 Pro‌ 在宣布时…

js 模块 简单实验

1.代码 1.1 t2.js var year "test"; export { year }; 1.2 t1.js import { year } from ./t2.jsalert(year); 1.3 t.html <script type"module" src"./t1.js"></script> 2.运行结果

我们在选择服务器的时候,经常会看到单线服务器,多线服务器和BGP服务器,那这些线路的服务器有存在哪些不同呢?

我们在选择服务器的时候&#xff0c;经常会看到单线服务器&#xff0c;多线服务器和BGP服务器&#xff0c;那这些线路的服务器有存在哪些不同呢&#xff1f; 单线 所谓的单线服务器是单网卡单个IP&#xff0c;指只有电信、联通或者移动一条线路。 缺点&#xff1a;由于线路单一…

边缘计算节点BEC典型实践:如何快速上手PC-Farm服务器?

百度智能云边缘计算节点BEC&#xff08;Baidu Edge Computing&#xff09;基于运营商边缘节点和网络构建&#xff0c;一站式提供靠近终端用户的弹性计算资源。边缘计算节点在海外覆盖五大洲&#xff0c;在国内覆盖全国七大区、三大运营商。BEC通过就近计算和处理&#xff0c;大…

rust actix-web定义中间件(middleware)记录接口耗时(接口耗时中间件和鉴权中间件)

文章目录 Actix-web定义中间件(middleware)记录接口耗时中间件简介中间件添加的两种方式&#xff08;接口耗时中间件&#xff09;使用wrap_fn 闭包实现使用warp struct实现中间件调用顺序actix自带的接口耗时中间件 鉴权中间件 Actix-web定义中间件(middleware)记录接口耗时 …

在linux和redhat企业版本中使用yum history回滚更新包

在redhat和linux中使用yum回滚更新 不推荐对系统进行小版本降级&#xff08;如将 RHEL6.1 降到 RHEL6.0&#xff09;&#xff0c;因为在这种降级中&#xff0c;libgcc和其他库不会按预期回滚&#xff0c;系统将处于“broken state”。想要进行少量更新的回滚&#xff0c;可以用…

css-grid使用

文章目录 grid概念容器和项目网格轨道&#xff1a;网格单元网格线 使用分配item空间大小对于子元素的意义 行列指定隐式和显示网格默认排列 grid容器属性grid-template-rows: 100px 100px 200px;grid-template-columns: 100px 100px 100px;grid-auto-rows: 200pxgrid-column-ga…

性能测试工具Jmeter你所不知道的内幕

谈到性能测试&#xff0c;大家一定会联想到Jmeter和LoadRunner,这两款工具目前在国内使用的相当广泛&#xff0c;主要原因是Jmeter是开源免费&#xff0c;LoadRunner 11在现网中存在破解版本。商用型性能测试工具对于中小型企业很难承担相关的费用。国内的性能测试工具有&#…

solidity0.8.0的应用案例11:透明代理合约

选择器冲突 智能合约中,函数选择器(selector)是函数签名的哈希的前4个字节。例如mint(address account)的选择器为bytes4(keccak256("mint(address)")),也就是0x6a627842. 由于函数选择器仅有4个字节,范围很小,因此两个不同的函数可能会有相同的选择器,例如…

使用Nodejs创建简单的HTTP服务器,借助内网穿透工具实现公网访问的方法分享

文章目录 前言1.安装Node.js环境2.创建node.js服务3. 访问node.js 服务4.内网穿透4.1 安装配置cpolar内网穿透4.2 创建隧道映射本地端口 5.固定公网地址 前言 Node.js 是能够在服务器端运行 JavaScript 的开放源代码、跨平台运行环境。Node.js 由 OpenJS Foundation&#xff0…

如何处理MySQL自增ID用完

​ 检查当前自增ID的最大值&#xff1a;你可以使用以下SQL查询语句来获取当前最大的自增ID值&#xff1a; SELECT MAX(id) FROM your_table;假设你的表名为 your_table 和自增ID列名为 id。 确定使用的自增ID类型&#xff1a;根据当前最大值来判断你使用的自增ID类型。如果当前…

【LeetCode75】第三十二题 链表最大孪生和

目录 题目: 示例: 分析: 代码: 题目: 示例: 分析: 题目让我们求出链表的最大孪生和&#xff0c;那么什么是孪生和呢&#xff0c;就是对称的节点就是孪生节点&#xff0c;他们的和就是孪生和。 比如第一个节点的孪生节点就是最后一个节点&#xff0c;第二个节点的孪生节点…

在Ubuntu上安装和设置RabbitMQ服务器,轻松实现外部远程访问

文章目录 前言1.安装erlang 语言2.安装rabbitMQ3. 内网穿透3.1 安装cpolar内网穿透(支持一键自动安装脚本)3.2 创建HTTP隧道 4. 公网远程连接5.固定公网TCP地址5.1 保留一个固定的公网TCP端口地址5.2 配置固定公网TCP端口地址 前言 RabbitMQ是一个在 AMQP(高级消息队列协议)基…

递归算法应用(Python版)

文章目录 递归递归定义递归调用的实现递归应用数列求和任意进制转换汉诺塔探索迷宫找零兑换-递归找零兑换-动态规划 递归可视化简单螺旋图分形树&#xff1a;自相似递归图像谢尔宾斯基三角 分治策略优化问题和贪心策略 递归 递归定义 递归是一种解决问题的方法&#xff0c;其精…

BootstrapBlazor组件使用:数据注解

文章目录 前言BB数据注解数据注解源码数据注解简介注解简单实例[BB 编辑弹窗](https://www.blazor.zone/edit-dialog)[ValidateForm 表单组件](https://www.blazor.zone/validate-form)使用简介 前言 BootstrapBlazor(一下简称BB)是个特别好用的组件&#xff0c;基本上满足了大…