React下载文件文件内容乱码

最新推荐文章于 2024-06-03 14:42:27 发布
最新推荐文章于 2024-06-03 14:42:27 发布
阅读量2.2k 收藏
点赞数
分类专栏： react 问题以及解决
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cmwly/article/details/103368271
版权

使用axios进行文件下载

  文件下载后内容乱码的主要原因是没有设置responseType，因为构造blob不知道何种原因总是对于构造后的数据是乱码的。

  因为存储从服务去返回的二进制文件流就必须要永达blob，但是接口自主构造却不行，所以这里就只能让响应实体返回blob，在请求的config中设置responseType：‘blob’，这样的会就会在response中返回blob，但是这个blob是data，而不是像feach中是个单独的方法。

0272)]

Loren_Wang
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
React开发基础文件下载
06-20
React开发基础文件下载，包含react.js、react-dom.js、browser.main.js 等相关文件
计算机前端react项目实例
02-09
另一个文件名“React┹汲瓜龟ㄒ”（这个文件名看起来像是乱码或错误的编码，可能原本应该是有意义的，但由于编码问题导致显示不正常），我们假设它代表了一个React组件或功能模块，比如“React数据表格组件”。...
文件下载(已解决重复下载反应慢、中文乱码等问题)
yuan_jie
09-20 519
#region 文件下载         ///         /// 下载方法主体         ///         ///         ///         ///         ///         ///         ///         public static bool ResponseFile(HttpResponse _
在 React中，有文件url，如何成功下载各类文件
最新发布
weixin_53363875的博客
06-03 459
react下载文件
解决request中文乱码的问题
10-30 1077
解决request中文乱码的问题   request.setCharacterEncoding(charset);必须写在第一次使用request.getParameter ()之前，  这样才能保证参数是按照已经设置的字符编码来获取。   response.setCharacterEncoding(charset);必须写在PrintWriter out = request.ge
react-native-vector-icons android图标乱码
taoerchun的专栏
05-18 948
问题： 我用的字体是蚂蚁金服的AntDesign,在真机调试时乱码或无效（FontAwesome显示的不是指定的图片，AntDesign显示的是乱码） 解决方案： 步骤1、将自己需要的字体从\node_modules\react-native-vector-icons\Fonts中拷贝到\android\app\src\main\asserts\fonts中，如果asserts\f...
a链接下载文件名乱码
weixin_39535289的博客
07-04 2833
react项目中，用a链接下载后文件名不能正常显示
React获取Java后台文件流并下载Excel文件流程解析
08-19
React获取Java后台文件流并下载Excel文件流程解析 React获取Java后台文件流并下载Excel文件流程解析是指在React前端应用程序中，通过axios库发送POST请求到Java后台服务器，以获取Excel文件流，并将其下载到本地...
react学习笔记-附件资源
03-02
react学习笔记-附件资源
多文件上传
07-28
【多文件上传】技术在现代Web应用中非常常见，它允许用户一次性上传多个文件，极大地提高了用户交互体验。实现多文件上传涉及前端和后端的多个环节，包括JavaScript的校验、页面效果的呈现以及服务器端的处理。下面...
springmvc上传下载并且保存到数据库
02-14
- **流操作**：从文件系统或云存储读取文件内容，通过 `ServletOutputStream` 将内容写入响应流，发送到客户端。 - **处理中文文件名**：下载时需要注意处理中文文件名的编码问题，避免乱码。 3. **数据存储** -...
前端页面导出table中的内容到excel
10-26
工作之余整理的，可用于实现在前端页面导出table表格中的数据到excel，支持生成json、excel等格式。
纯前端将table表格导出
Scar_goSky的博客
10-12 387
//导出excel function toExcel(){ //window.location.href='<%=basePath%>pmb/excelShowInfo.do'; //获取表格 var exportFileContent = document.getElementById("table_report").outerHTML; //设置格式为Excel，表格内容通过btoa转化为base64，此方法只在
搭建react项目文件不全解决办法
hql1024的博客
10-18 405
**问题描述：**想要用脚手架快速新建一个react app的时候使用 npx create-react-app project 命令后查看文件夹，文件夹下只有node_modules,package.jsonand packageloack.json 三个项目，其他如 src, public and scripts folder 都没有。 并且安装报错 A template was not provided. This is likely because you're using an outdated
解决react中文乱码的问题
鶸者为何战斗
02-27 9457
在修改react中的组件信息使用中文的时候 出现了一些乱码. 源代码: 修改后的代码: 根据es6中对中文的unicode处理即可解决.
fetch请求的数据中文返回乱码
依旧00的专栏
02-20 1422
这周遇到一个问题,使用fetch请求返回的数据是GBK格式的,中文会显示乱码,最终解决方案使用FileReader来解析。
解决Vs Code工具开发时 保存React文件时出现乱码情况
weixin_74535649
08-07 3997
解决Vs Code工具开发时 保存React文件时出现乱码情况
前端请求接收字节流下载文件兼容失败情况读取错误信息写法、Vue、React、js
wcyjx的博客
03-12 1007
原因：前端因为下载字节流需要设置responseType: “blob”，如果请求失败时返回正常对象错误也会被设置为blob，无法读取正常的错误信息。解决方法：兼容请求成功时获取到 blob 和 请求失败时拿到接口返回的 json 错误信息。使用 FileReader对象。
react 下载文件流
08-22
你可以使用以下方法在React中下载文件流： 1. 导入必要的依赖： ```javascript import React from 'react'; import axios from 'axios'; ``` 2. 创建一个处理下载的函数： ```javascript const downloadFile = () => { axios({ url: 'https://example.com/file/stream', // 替换为你要下载的文件流的 URL method: 'GET', responseType: 'blob', // 设置响应类型为二进制流 }).then((response) => { const url = window.URL.createObjectURL(new Blob([response.data])); const link = document.createElement('a'); link.href = url; link.setAttribute('download', 'filename.ext'); // 替换为你要下载的文件名和扩展名 document.body.appendChild(link); link.click(); }); }; ``` 3. 在组件中使用该函数： ```javascript const App = () => { return ( <div> <button onClick={downloadFile}>下载文件</button> </div> ); }; ``` 记得在你的组件中渲染`<App />`。当用户点击按钮时，将会触发`downloadFile`函数，该函数会使用 Axios 发起一个 GET 请求并获取文件流。然后，它会通过创建一个临时的 URL 对象来生成可下载的链接，并模拟点击该链接来触发文件下载。请注意，你需要将 `https://example.com/file/stream` 替换为你实际要下载的文件流的 URL，将 `filename.ext` 替换为你要下载的文件名和扩展名。 这是一个简单的示例，你可以根据自己的需求进行扩展和修改。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值