js下载文件、js下载跨域文件

 downloadFile('下载文件的路径','1.txt')
    function download(href, filename = '')  {
        const a = document.createElement('a')
        a.download = filename
        a.href = href
        document.body.appendChild(a)
        a.click()
        a.remove()
    }
    function downloadFile(url, filename='') {
        fetch(url, {
            headers: new Headers({
                Origin: location.origin,
            }),
            mode: 'cors',
        })
            .then(res => res.blob())
            .then(blob => {
                const blobUrl = window.URL.createObjectURL(blob)
                download(blobUrl, filename)
                window.URL.revokeObjectURL(blobUrl)
            })
    }

自己服务器后台和对象存储服务器都需要设置跨域!!!!来源填写 *

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、付费专栏及课程。

余额充值