vue中axios从content-disposition响应头获取中文名

news2024/10/6 6:46:14

在Vue中使用axios请求文件时,服务器可能会返回带有Content-Disposition响应头的文件,其中可能包含文件名的编码信息。如果你需要解码这个文件名,可以使用JavaScript的内置URL API来处理。

Java中用于设置HTTP响应头的,通常在Web开发中,特别是当涉及到文件下载时,会用到这样的设置。

response.setHeader("Access-Control-Expose-Headers", "Content-Disposition");
response.setHeader("Content-Disposition", "attachment; filename=" + downloadName);

返回的数据样式:

以下是一个简单的示例,展示如何使用axios和URL API来解码Content-Disposition响应头中的文件名:

        // 发送axios请求获取响应头和响应数据
        let { headers, data } = await this.exportFunc(ids)
        console.log('headers', headers)
        let filename = ''
        const contentDisposition = headers['content-disposition']
        if (contentDisposition) {
          // 解析出filename*值
          const filenameRegex = /filename[^;=\n]*=((utf-8)?['"]?)([\x21-\x7E\u0080-\uFFFD]*)(\2)/
          const match = contentDisposition.match(filenameRegex)

          if (match) {
            const encodedFilename = match[3]
            if (match[2] === '"') {
              // 如果有引号,需要解码百分比编码
              filename = decodeURI(
                encodedFilename.replace(/%(?:25)?(..)/g, (_, hex) => String.fromCharCode(parseInt(hex, 16))),
              )
            } else {
              try {
                // 尝试使用URL API解码
                filename = decodeURIComponent(encodedFilename)
              } catch {
                // 如果失败,可能是非UTF-8编码,手动处理
                filename = encodedFilename
              }
            }
          }
          console.log('解码后的文件名:', filename)
        }
        const blob = new Blob([data])

        this.saveAs(blob, filename)
exportFunc(ids) {
      return axios({
        method: 'post',
        url: 'xxxx',
        responseType: 'arraybuffer',
        data: {
          ids: ids,
        },
      })
},

使用axios发送GET请求,并设置responseType'blob'以接收二进制数据。然后,我们从响应头中提取Content-Disposition,并尝试解析出文件名。如果文件名编码为UTF-8,我们使用decodeURIComponent解码。如果不是,我们可能需要根据实际编码手动处理。

下载文件:

saveAs(blob, filename) {
      const eleA = document.createElement('a')
      eleA.download = filename
      eleA.style.display = 'none'
      eleA.href = URL.createObjectURL(blob)
      document.body.appendChild(eleA)
      eleA.click()
      URL.revokeObjectURL(eleA.href) //释放URL对象
      document.body.removeChild(eleA)
},

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

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

相关文章

js中!emailPattern.test(email) 的test是什么意思

test 是 JavaScript 正则表达式(RegExp)对象的方法之一,用于测试一个字符串是否与正则表达式匹配。正则表达式是一种用于匹配字符串的模式,通常用于验证输入数据、查找和替换文本等。 使用 test 方法 test 方法语法如下&#xf…

Ubuntu20.04中复现FoundationPose

Ubuntu20.04中复现FoundationPose 文章目录 Ubuntu20.04中复现FoundationPose1.安装cuda和cudnn2.下载相关资源3.环境配置4.运行model-based demo5.运行ycbv demoReference 🚀 非常重要的环境配置 🚀 ubuntu 20.04cuda 11.8.0cudnn v8.9.7python 3.9.19…

3ds MAX 2024版资源包下载分享 3ds Max三维建模软件资源包下载安装

3DSMAX凭借其强大的功能和广泛的应用领域,吸引了无数创作者的青睐。 在游戏制作领域,3DSMAX展现出了无可比拟的优势。从细腻的角色建模到宏大的场景搭建,再到逼真的动画效果和渲染,它都能轻松应对,为游戏世界注入了生动…

Linux服务器上激活conda环境conda: error: argument COMMAND: invalid choice: ‘activate‘

正常我们使用如下来流程: 创建环境:conda create -n 环境名称 激活环境:conda activate 环境名称 但是,在Linux服务器上,使用conda activate 环境名称,出现如上图所示的报错。conda: error: argument CO…

伦敦现货黄金交易市场的历史与地位

英国的伦敦之所以能够成为世界上最大的现货黄金交易市场,当然有着其历史的原因。其实早在1804年,伦敦就取代荷兰阿姆斯特丹交易所,成为了世界黄金交易的中心。1919年伦敦黄金市场正式成立,每天上午和下午的进行两次黄金定价&#…

详细图文手把手教你阿里云注册域名如何托管到CloudFlare DNS服务

1.第一步:注册并登录Cloudflare账号,点击右上角“添加站点”,进入下图页面填写域名,点击继续。 2.第二步:进入页面滑动到最下方,选择Free免费套餐,再次点击继续。 3.第三步:这个页面…

socket--IP端口爆破域名解析

免责声明:本文仅做技术交流与学习... 目录 IP端口爆破 域名解析爆破 IP端口爆破 #端口扫描: #获取扫描的 IP和端口 #连接 IP和端口(socket) #判断连接状态-开放和关闭# import socket # # 加入参数模式 # import os # ssocket.socket() # s.connect((…

HarmonyOS NEXT首个公测Beta版封包完成

华为将在6月21日至23日在深圳举办华为开发者大会2024。 根据华为消费者业务CEO余承东此前的预告,HarmonyOS NEXT将在大会上正式推出Beta版本,用户将有机会体验全新的鸿蒙系统。 HarmonyOS NEXT首个公测Beta版封包完成:Mate 60和Pura 70系列即…

【干货】分享系统源码,总有一个你想要的(Java、Python、Android、C#、Vue等)

目录 即时通讯管理系统(JavaSpringBootvueelementui)在线考试系统(JavaSpringBootVue)JavaSpringBootVue实现猜灯谜答题抽奖系统JavaSpringSpring MVCMyBatis实现图书管理系统基于SpringBootMySQLGuavaRedisRabbitMQ实现高并发商品…

Playwright鼠标悬浮元素定位方法

优点:你把鼠标点烂,把它从20楼丢下去,元素定位就在那,他不动,我说的偶像! F12打开浏览器的调试页面 点击源代码Sources 右侧找到事件监听器断点(Event Listener breakpoints)&#…

防止暴力破解,教你如何在登录失败后实施10分钟账户锁定策略!

最近,在服务器上发现了异常的登录尝试。尽管您的团队已经采取了强密码策略和其他安全措施来加固服务器,但恶意程序仍然通过暴力破解的方式试图多次尝试猜测正确的凭据以获取访问权限。为了增强系统的安全性,特别是防止此类暴力破解攻击&#…

LeetCode esay mid 记录

1486. 数组异或操作 感觉一般也用不到 emmm 灵茶山艾府传送门 推导过程可以结合官网部分观看 重点由两部分的结合 将特定部分转换为常见部分 0到n的异或和表示 2595. 奇偶位数 0x555是十六进制数,转换为二进制为 0101 0101 0101 class Solution {public int[…

随时随地,开启你的短剧之旅——小程序系统大揭秘

在快节奏的现代生活中,短小精悍、情节紧凑的短剧成为了人们消遣碎片时间的新宠。短剧小程序系统应运而生,旨在满足这种新兴的娱乐消费需求。该系统不仅为观众提供了便捷的观剧方式,还为创作者和品牌搭建了一个全新的展示平台。接下来&#xf…

白酒:茅台镇白酒的酒厂社会责任与可持续发展

云仓酒庄豪迈白酒,作为茅台镇的品牌,不仅在产品品质和口感方面有着卓着的表现,在酒厂社会责任和可持续发展方面也做出了积极的探索和实践。 首先,云仓酒庄豪迈白酒注重环境保护和资源利用。酒厂在生产过程中严格控制能源消耗和排放…

操作系统 - 进程的控制(创建与终止)

进程控制 文章目录 进程控制进程创建进程的终止wait()和waitpd()僵尸进程孤儿进程 进程创建 程序在执行的过程中,可能会创建多个进程,创建进程称为父进程,新的进程称为子进程,每个新的进程也可以创建其他进程,从而形成…

警惕!ELSEVIER旗下1本双1区TOP被On Hold !请大家谨慎投稿

【SciencePub学术】又1本!双1区TOP刊被On Hold !官方现在对期刊质量的管控越来越严格了,被标记为On Hold后的期刊中,大部分的命运也是被WOS数据库剔除!所以请大家谨慎投稿! 《Information Sciences》作为一…

研发管理平台有哪些?符合软件公司需求的工具要具备这几个特征!

本人从事TOB行业十余年,目前就职的就是一家软件公司。下面,本人就站在软件公司的角度来讲一讲:我们公司做项目研发时,会选择一个什么样的研发管理工具来辅助?供大家参考。 众所周知,软件研发项目是一个复杂…

git复制他人的远程仓库到自己的远程仓库

使用 git clone <远程仓库链接> 克隆你需要的远程仓库到本地仓 然后在本地仓里找到配置文件 修改配置文件里面配置 使用 git push -u origin master 上传本地仓文件到自己的远程仓库

Django REST framework序列化器详解:普通序列化器与模型序列化器的选择与运用

系列文章目录 Django入门全攻略&#xff1a;从零搭建你的第一个Web项目Django ORM入门指南&#xff1a;从概念到实践&#xff0c;掌握模型创建、迁移与视图操作Django ORM实战&#xff1a;模型字段与元选项配置&#xff0c;以及链式过滤与QF查询详解Django ORM深度游&#xff…

牛客周赛 E-茜茜的计算器

原题链接&#xff1a;E-茜茜的计算器​​​​​​ 题目大意&#xff1a;在计算器上显示的0~9十个数字&#xff0c;如果这个计算器有n个位置&#xff0c;可以显示n个数字&#xff0c;问能显示多少种不同的对称数字。只能横轴和竖轴对称。 思路&#xff1a;容斥&#xff0c;最终…