前端下载文件踩坑

最新推荐文章于 2024-04-12 00:33:47 发布
最新推荐文章于 2024-04-12 00:33:47 发布
阅读量188 收藏 1
点赞数
文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_47733490/article/details/121833686
版权
博客探讨了在前端实现模板下载时遇到的无法打开文件的问题。问题出现在尝试从后端接口下载数据时，解决方案在于限制网络请求的数据类型为Blob，确保前端能正确解析后端返回的模板内容。通过这一调整，下载操作得以正常进行。
摘要由CSDN通过智能技术生成

根据需求，当点击下载按钮时，判断状态，可有两种情况，下载空模板和下载有数据的模板

 当点击某一按钮时，下载对应的模板

当打开时，始终出现无法打开的问题

 调试了一个下午，用同样的方法放到别的页面就可以，在这个页面就不行

前方雷区！！！！！！！！！！！！！先上代码

 由于下载是请求接口，用后端的返回值进行blob转码，所以在这个过程中需要在网络请求处加上数据类型的限制

 在加上网络请求的数据类型限制后，就可以正常进行下载操作了，相当于将后端的返回值以blob的形式返回，前端再以blob的格式进行解析

 

刘大气
关注
前端使用shp-write导出shp格式文件踩坑
weixin_44805353的博客
09-21 853
记录前端使用shpwrite插件导出shp文件过程中遇到的问题。
windows下superset源码安装(前端向&踩坑指南)
百岁如流富贵冷灰的博客
08-18 3899
最近公司需要基于superset框架进行一些开发工作，所以需要在本地部署superset并且进行修改，但是安装总是各种失败，用了接近2天的时间，可恶！！！。必须记录下来希望后来人可以少踩点坑。 安装开始 所需环境：（python(最新版即可)，node环境（前端应该都有，就不赘述了）） 1.安装python环境 安装最新版即可，最新版的python自带pip打包管理工具。这一步唯一需要注意的点就是在安装的第一步要勾选将python添加到path中 2.下载superset源码（https://gi
前端下载(jquery 踩坑记录)
YYYYYun的博客
08-26 280
最近在做一个功能，是调用一个后台接口实现excel表格下载的功能。后端返回的是一个arrayBuffer，前端采用的是jquery ajax。 下载方式： <a href="下载地址" download="文件名.后缀">下载</a> 前端请求接口，后端返回网络地址，前端使用浏览器打开即可实现下载。window.open(后端返回的地址) 前端请求回的地址，动态生成a标签下载。 后端返回的是一个文件（arrayBuffer） 前端本地读取excel 1readAsArray
前端下载后端文件流，文件可以下载，但是打不开，显示“文件已损坏”的问题分析与解决方案
前端小白, 稀土：雩风十六
11-04 5342
前端下载后端文件流，xlsx文件可以下载，但是打开显示“文件已损坏”的处理方案
前端导出excel文件，本地下载后无法打开或格式错误
成长之痛
03-05 5014
在处理前端下载文件的问题时，我们需要注意数据的格式、响应类型的设置以及如何正确地获取数据。同时，还需要关注项目中可能存在的响应拦截器，确保它们不会影响到我们的下载逻辑。通过仔细地排查和分析，我们可以找到问题的根源并解决它。
vue+axios 前端下载文件-解决后端返回的文件流乱码问题
weixin_33962621的博客
05-05 1万+
打印出后端返回的数据：乱码了 解决方法： 在前端请求的时候携带请求头responseType:blob， axios({ method: 'GET', url: '/api', params: params, responseType: 'blob' }).then(res=>{ consol...
后台接口返回文件流前端实现文件下载
风如也的博客
11-18 1万+
前因：传参后发起post请求，后台接口返回的是二进制文件流，接收的内容如图： 后果：将接收到的文件流直接下载并保存到本地。 要下载的文件是一个.zip 压缩包。 按一般方式请求后台接口，打印接口返回的内容： 下载方法： dwonload() { if (this.$refs.checkIssueForm('ruleForm')) { let params = { remark: this.remark } this.$ajax.post('/api/downloa
前端实现PDf文件下载功能
夏沫之初的博客
02-27 1947
前端实现生成PDF并下载的功能
前端部署踩坑
兰博儿
03-07 414
背景： pSpacePlus是公司研发的一款工业云端实时历史数据库，后端采用微服务架构，前端使用vue，前后端分离； 该产品绝大多数的应用场景为私有化部署； 在打包前端工程时，因为将后端的访问地址打包到dist安装包中，导致每次部署每次重新部署到一个新的机器时都需要根据机器ip重新打包； ...
vue项目中文件下载踩坑之路
qq_41950018的博客
05-29 4161
最近工作中用到了文件的下载功能，文件的下载不能简单用ajax请求，文件下载还会涉及到http跨域问题，于是搜集了各种方法，一步步踩坑，终于有点眉目了。 方法一：a标签下载 利用a标签的href属性，但是遇到的问题是，我这边拿到的url是跨域的，在给文件设置名称的时候，a标签的download属性无效。找了很多资料也没能解决，想哭。 代码如下： if (!url) { r...
前端下载文件时，打开文件时报无法显示图片或图片损坏的问题
qq_55700129的博客
04-12 598
二、前端下载文件方式①导航栏方式请求，这种只要后端设置好响应头，浏览器会识别这是一个带附件的响应，并自动下载。②通过ajax和axios不是浏览器的内置方式 ，即使后端配置好，前端浏览器不会自动识别与下载。，这是必不可少的配置，如果还不能解决问题，把get请求改为post请求，我的问题就是get，改为post，就可以顺利下载并显示。属性，看后端是否正确的发送回图片数据。如下：这是一张带英文的图片。1.download函数的核心代码（模拟a标签请求）一、首先先看网络记录http请求和响应的数据，查看。
后端返回文件流，前端下载文件出现 “无法打开文件“ 错误
lovezhuer1的博客
08-02 9288
解决前端下载无法打开文件错误
前端文件下载的八种方法(解决pdf、图片在浏览器自动打开问题)
热门推荐
weixin_46022934的博客
11-18 3万+
系列文章目录 一、直接使用a标签下载文件(三种方法) 第一种：下载.zip(压缩文件) 第二种：下载.txt(文本文件) 第三种：指定网络地址下载文件 第四种：下载pdf文件（浏览器不自动打开） 二、使用JavaScript(四种方法) 第一种：绑定点击事件 第二种：指定location的href地址 第三种：使用form表单的下载文件 第四种：使用saveAs(url)方法（谷歌、火狐等新浏览器不适用，只支持老的IE6、7、8） 三、使用canvas进行图片下载(防止浏览器自动打开图片) 代码片段如下所示
前端js实现图片视频文件直接下载而不是打开新页面预览
xuefeng11111的博客
10-10 3872
刚接到一个需求，要求在一个页面进行视频点击下载，而不是点击之后跳转到新页面进行预览 之前做过下载图片都是通过转成base64的形式进行下载，但是视频文件太大，这种方式肯定是不行的，后来网上查了一下，可以通过转换成Blob格式进行下载，这种方式可以是可以，但是有一个问题，就是必须等ajax请求完成之后，才会弹出下载框，而且这种方式其实文件已经下载到内存中了，在你点击下载之后就直接可以下载下来了，但是如果文件1G大小还通过这种方式下载的话就太不人性化了 后来，才发现，这个问题解决的话需要后端进行处理 需要后端设
前端下载后端返回文件流【踩坑篇】
jinchunye的博客
12-29 857
事情是这样的，我们pass平台资源面板在对接其他项目组导出文件功能，我们这边直接Node端转发他们的接口，接收到返回的包文件，直接返给前端，前端做下载。
前端文件流下载填坑之旅
weixin_41326021的博客
06-29 1432
文件流下载的适用场景是： 前端页面点击导出按钮后调取后端接口，接口返回数据，下面分享下都遇到哪些坑
window.open 前端下载文件，被拦截 或者显示无法安全下载问题
Qlily_ing的博客
10-13 7316
openWin: function(url) { $('body').append($('<a href="'+url+'" id="openWin" target="_blank"></a>')) document.getElementById("openWin").click();//点击事件 $('#openWin').remove(); }, 把 window.open(url)换成以上方法 ...
关于前端视频下载我踩过的坑
未末的博客
08-11 3581
1.项目框架：vue 2.需求：项目需要下载大的视频文件 3.视频下载踩坑日记 方法1. 遇到这个需求我首先用a标签去模拟一个点击事件想通过这种方式来实现点击下载 let link = document.createElement('a'); //创建a标签 link.href = url //添加链接 link.download = url.split('/')[url.split('/').length -1] // // 给文件加下载文件的名字 document.body.appendChild(
metabase二次开发 前端windows踩坑
最新发布
09-25
MetaBase是一款开源的企业级数据服务管理平台，主要用于数据源管理和查询构建。在Windows环境下进行Metabase的二次开发时，前端部分可能会遇到一些常见的踩坑情况： 1. **环境配置**：Windows上可能需要安装Node.js和npm，以及相关的Web开发工具如Webpack等。确保版本兼容，并正确配置环境变量。 2. **文件路径处理**：Windows的文件路径分隔符通常是反斜杠`\`，但在JavaScript中可能需要用正斜杠`/`。注意跨平台兼容，特别是在读取、保存文件路径时。 3. **权限问题**：如果你尝试访问受限的系统资源或安装模块时可能会遇到权限不足。确保作为管理员运行命令行或设置合适的用户权限。 4. **IDE集成**：Visual Studio Code这类跨平台的IDE可以较好地支持Node.js开发，但如果使用Eclipse或IntelliJ IDEA这类专为Windows设计的IDE，可能需要额外的配置步骤。 5. **调试工具**：Chrome DevTools是一个强大的前端调试工具，但在Windows上可能与其他软件冲突，需要调整调试配置。 6. **跨浏览器兼容性**：测试在IE或其他非主流浏览器上的行为，因为它们对某些CSS和JavaScript特性支持可能不一样。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值