json文件下载--防止chrome直接打开方案

2024-05-08 09:09:13

一、HTML中的a标签实现点击下载

通常在咱们写项目的时候会遇到上传下载什么的，在上传完文件后会把文件的路径保存到数据库里以便下载，如果想不通过后台直接下载的话，可以把文件路径给a标签的属性href；

 <a href="/user/test/xxxx.txt">点击下载</a>

这样当用户打开浏览器点击链接的时候就会直接下载文件。

但是有个情况，比如txt,png,jpg等这些浏览器支持直接打开的文件是不会执行下载任务的，而是会直接打开文件，这个时候就需要给a标签添加一个属性“download”；

<a href="/user/test/xxxx.txt" download="文件名.txt">点击下载</a>

这里download也可以不写任何信息，会自动使用默认文件名。

二、问题：即使使用a标签的download属性，chrome浏览器还是会打开

追查问题原因：

服务器端返回的response中，content-type为text/plain，即数据以纯文本形式(text/json/xml/html)进行编码，其中不含任何控件或格式字符。chrome浏览器直接打开了该文本，并没有下载。

解决方案：使用ajax请求该url，获取到文本内容，手动实现下载。

//html代码：<aonClick={() => {this.downLoad(href);}}disabled={href ? false : true}>下载执行结果</a>

//js代码：
downLoad = url=> {
//后面加上‘&’，防止请求时，url后面添加问号会影响原来的url参数值let newurl = url + "&";let fileName = url.slice(url.lastIndexOf("/") + 1, url.indexOf("?"));let result = '';fetchGet(newurl, {}, { credentials: "include" }).then(response=> {result = JSON.stringify(response);var datastr = `data:text/json;charset=utf-8,${result}`;var downloadAnchorNode = document.createElement("a");downloadAnchorNode.setAttribute("href", datastr);downloadAnchorNode.setAttribute("download", fileName + ".json");downloadAnchorNode.click();downloadAnchorNode.remove();});};

三、写到最后

chrome浏览器对与txt，json等文件直接打开，而不下载的问题，困扰了一天，查找很多帖子无果。也曾经尝试使用a标签href+download属性，iframe，window.open，window.location.href的方式，都会出现打开不下载的问题。对于jar，zip等浏览器不支持预览的文件，使用a标签href+download属性的方法还是不错的。

json文件下载--防止chrome直接打开方案相关推荐

在Chrome中打开网页时出现以下问题您的连接不是私密连接攻击者可能会试图从 x.x.x.x 窃取您的信息（例如：密码、通讯内容或信用卡信息）
现象:在Chrome中打开网页时出现以下问题您的连接不是私密连接攻击者可能会试图从 x.x.x.x 窃取您的信息(例如:密码.通讯内容或信用卡信息). 当点开"了解详情"后显示 ...
Chrome浏览器打开异常慢的解决办法
Chrome浏览器打开异常慢的解决办法参考文章: (1)Chrome浏览器打开异常慢的解决办法 (2)https://www.cnblogs.com/Cate-Hunter/p/10856919.h ...
解决Chrome浏览器打开虾米音乐网页播放器时的排版问题
2019独角兽企业重金招聘Python工程师标准>>> 几年了,虾米音乐网页播放器听音乐都有个纠结的地方,就是用Chrome浏览器打开时,排版会出错,表现为播放器右边一部分显示不出来 ...
C#开发笔记之19-如何用C#实现优雅的Json解析（序列化/反序列化）方案？
本文由比特飞原创发布,欢迎大家踊跃转载. 转载请注明本文地址:C#开发笔记之19-如何用C#实现优雅的Json解析(序列化/反序列化)方案? | .Net中文网. C#开发笔记概述另外可参考文章 ...
Chrome无法打开文件的错误 [Not allowed to load local resource: file://XXXX]
问题描述  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional// ...
chrome无法打开任何网站提示证书过期
遇到chrome无法打开任何网站提示证书过期的问题. 1.浏览器设置问题. 2.修改过电脑时间,导致时间不一致. 3.开启了监控工具,例如Fiddler, 今天自己就是因为开启了fiddler,导致浏 ...
chrome浏览器打开网址找不到服务器IP
chrome浏览器打开网址找不到服务器IP 电脑装完系统后,路由器重启了,安装了chrome浏览器,但是打开任何网址都显示找不到服务器ip,然后换360浏览器发现一切正常,说明网络是没问题的,然后通过 ...
使用chrome浏览器打开微信页面配置方式
当我们打开微信浏览器的页面时,会提示这个下面教大家用Chrome浏览器打开微信页面,以方便调试. 1.微信的UA(User agent:用户代理). 安卓微信UA: mozilla/5.0 (lin ...
python3 Json转xmind代码与打开
python3 Json转xmind代码与打开问题 Json转xmind 生成文件并打不开问题 Json转xmind格式,使用xmind包生成的xmind文件无法使用xmind软件打开. Json ...
chrome浏览器打开网页默认全屏的方法_测试成功
chrome浏览器打开网页默认全屏的方法 1.在桌面上右键创建快捷方式 2.在地址栏中输入: "C:\Program Files (x86)\Google\Chrome\Applicatio ...

最新文章

热门文章