js进行txt文件下载方式或oss文件访问下载跨域解决

js 进行txt 文件URL下载

通常我们使用js进行URL文件下载一般为两种

1.使用window.open(url) 打开url完成 浏览器自动下载
2.使用<a>标签进行文件访问下载

这两种的区别是一个需要开出一个空白页面，a标签不需要进行页面转换

但对于txt文件，使用这两种都会直接将txt文件进行浏览器展示，当我们需要进行文件下载的时候就很难满足了，对于这种，我们搜索到的答案绝大部分都是
给a标签添加 download属性
如下：

function getBlob(url, filename) {layer.load()var xhr = new XMLHttpRequest();xhr.open('GET', url, true);xhr.responseType = 'blob';xhr.onload = function () {layer.closeAll('loading')if (xhr.status === 200) {var blob = xhr.responseif (window.navigator.msSaveOrOpenBlob) {navigator.msSaveBlob(blob, filename);} else {var link = document.createElement('a');var body = document.querySelector('body');link.href = window.URL.createObjectURL(blob);link.download = filename;// fix Firefoxlink.style.display = 'none';body.appendChild(link);link.click();body.removeChild(link);window.URL.revokeObjectURL(link.href);}} else if (xhr.status === 404) {layer.msg('文件不存在')} else {layer.msg('接口请求失败')}};

然而这种方式只适合资源和当前服务符合同源策略，当我们需要访问的文件和当前服务跨域的时候，就无法实现。因为在非同源策略下的download属性是不会生效的。
对此，找了无数的页面后发现其实只需要很简单的一步，就是给我们的URL拼接上

                  '?response-content-type=application/octet-stream'

对的，就是这么简单。
获取url文件：

      window.open(file_url+'?response-content-type=application/octet-stream');

大家可以尝试一下，是否解决了你的问题呢，我也是在访问oss的txt文件，不是跨域就是直接打开浏览器展示，花了几个小时才找到这个解决办法。

js进行txt文件下载方式或oss文件访问下载跨域解决相关推荐

阿里云OSS上传下载跨域问题
OSS文件传输使用OSS进行上传/下载操作时,时常会遇到跨域问题. 其表现为,直接通过浏览器,可以直接访问已经存储在OSS中得文件地址并下载,但是通过代码却会报跨域问题. 解决办法:登录阿里云OSS ...
js使用Blob的方式实现excel表格的下载(流文件下载)
js使用Blob的方式实现excel表格的下载(流文件下载) js前端下载工具 getToken 为了获取token, 不需要的可以去除 downLoadXlsx中的data, 是数据的搜索参数(根据 ...
Java通过流的方式从OSS打压缩包下载或者直接下载文件,并返回输出流给前端(弹框选择下载路径)
需求提供一个接口,前端通过按钮下载文件,根据不同的id下载对应的文件,由于都是多个文件,需要进行打压缩包下载,文件保存在oss服务器上注意:我的压缩包名称和文件名称都是通过日期或者uuid生成的, ...
阿里OSS文件流下载问题
阿里OSS文件流下载问题阿里OSS获取文件流,因为是网络传输流,所以ossObject.getObjectContent().available()不能一次性获取文件大小:传回的文件流,如果一次读取 ...
[html] 使用a标签的download属性下载文件会有跨域问题吗？如何解决？
[html] 使用a标签的download属性下载文件会有跨域问题吗?如何解决? 最近刚遇到这个问题,后台返回的图片链接,点击按钮批量下载,a标签的 download 属性只对同源文件有效, 所以我们 ...
jquery、javascript实现(get、post两种方式)跨域解决方法
jquery.javascript实现(get.post两种方式)跨域解决方法一.实现get方式跨域请求数据浏览器端 <script> $(document).ready(fun ...
win10计算机拒绝访问,Win10文件访问被拒绝如何解决？
最近有Win10系统用户反映,打开文件夹时出现提示框"你当前无权访问该文件夹",这是怎么回事呢?其实,这是Win10系统为了保护系统文件的安全所给出的安全警告.只要提升自己的访问权 ...
vue中实现文件批量打包压缩下载（以及下载跨域问题分析）
上次做了一个选择多个数据生成多个二维码并下载,当时项目催的紧,就简单写了个循环生成二维码下载,一次性会下载很多文件,特别难整理: 刚好这次项目又遇到类似这种功能,需要一次性批量下载多个文件,那么就安排 ...
AOP注解@Before、@AfterReturning拦截单个方法的入参和出参，纯注解方式（附源码下载），解决单个方法不生效问题（一）
AOP注解@Before.@AfterReturning拦截单个方法的入参和出参,纯注解方式(附源码下载),解决单个方法不生效问题(一) 问题背景 AOP注解@Before.@AfterReturni ...
前端js以application/octet-stream方式上传文件
今天又学会了一种上传文件的文件流方法. 本人后端采用了CXF框架实现的 api层 package com.inspur.gs.tax.tbs.utils;import org.glassfish.je ...

js进行txt文件下载方式或oss文件访问下载跨域解决

js 进行txt 文件URL下载

js进行txt文件下载方式或oss文件访问下载跨域解决相关推荐

最新文章

热门文章