js下载跨域的文件

普通a链接点击下载(同源)

<a href="http://ppt.beegoedu.com/Upload/unlogo/2017112980744.jpg" download="11.jpg">111</a>

跨域下载文件(非同源)

在这里插入图片描述

<a onclick="a()">下载图片</a>

function a(){
   let url ="http://ppt.beegoedu.com/Upload/unlogo/2017112980744.jpg";
   let name ="123";
   const downloadRes = async () => {
	  let response = await fetch(url); 
	  let blob = await response.blob();  
	  let objectUrl = window.URL.createObjectURL(blob);
	  let a = document.createElement('a');
	  a.href = objectUrl;
	  a.download = name;
	  a.click()
	  a.remove(); 
   }
  downloadRes();
}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在Vue.js下载文件时,如果涉及到跨域问题,可以进行以下处理: 首先,在服务器端配置允许跨域请求的响应头。具体来说,需要在服务器端的响应中添加如下的头信息: ``` Access-Control-Allow-Origin: * Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS Access-Control-Allow-Headers: Origin, Content-Type, X-Auth-Token ``` 接着,可以通过使用axios库发送GET请求来实现文件下载。在发送下载请求时,需要在请求头中设置`responseType`为`blob`,该选项指定响应的数据类型为二进制数据。具体代码如下: ```javascript import axios from 'axios'; export function downloadFile() { axios({ method: 'GET', url: '下载文件的地址', responseType: 'blob' }) .then(response => { const url = window.URL.createObjectURL(new Blob([response.data])); const link = document.createElement('a'); link.href = url; link.setAttribute('download', '文件名'); document.body.appendChild(link); link.click(); }) .catch(error => { console.error('下载文件出错:', error); }); } ``` 在该代码中,通过axios发送GET请求并设置`responseType`为`blob`,将服务端返回的文件数据转换成二进制数据。然后创建一个`<a>`元素,将Blob数据作为URL创建链接,并设置`download`属性为要下载文件名。最后将链接添加到文档中,并触发点击链接的操作以下载文件。 需要注意的是,在Vue.js中需要安装axios库,可以使用以下命令进行安装: ``` npm install axios --save ``` 以上就是在Vue.js下载文件跨域的解决方案。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值