文件下载重命名（跨域）
生活随笔
收集整理的這篇文章主要介紹了
文件下载重命名（跨域）
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
一、正常情況下，我們都如此下載文件并修改文件名，在a標(biāo)簽上面添加download屬性
var link = document.createElement('a'); link.href = file.url; link.download = file.name; link.target="_blank"; link.click();由于a.download跨域會(huì)失效，上面代碼只可同域?qū)崿F(xiàn)
二、通過(guò)blob實(shí)現(xiàn)跨域下載并修改文件名
點(diǎn)擊時(shí)調(diào)用如下方法
function load(file) { this.getBlob(file.url).then(blob => { this.saveAs(blob, file.name); }); },//通過(guò)文件下載url拿到對(duì)應(yīng)的blob對(duì)象
getBlob(url) { return new Promise(resolve => { const xhr = new XMLHttpRequest();xhr.open('GET', url, true); xhr.responseType = 'blob'; xhr.onload = () => { if (xhr.status === 200) { resolve(xhr.response); } };xhr.send(); }); }, //下載文件 saveAs(blob, filename) { var link = document.createElement('a'); link.href = window.URL.createObjectURL(blob); link.download = filename; link.click(); }測(cè)試案例代碼如下：
<html> <head> <script language="javascript"> function loadex() {this.getBlob("http://[ip]/000000-bladex/upload/20220408/c99b50378a3b9f9043207476ddb287fd.jpg").then(blob => { this.saveAs(blob, "hello.jpg");});}function load(file) {this.getBlob(file.url).then(blob => {this.saveAs(blob, file.name);});}function getBlob(url) {return new Promise(resolve => {const xhr = new XMLHttpRequest();xhr.open('GET', url, true);xhr.responseType = 'blob';xhr.onload = () => {if (xhr.status === 200) {resolve(xhr.response);}};xhr.send();});}//下載文件function saveAs(blob, filename) {var link = document.createElement('a');link.href = window.URL.createObjectURL(blob);link.download = filename;link.click();}</script> </head> <body><a href="#" onclick="loadex()">hello</a> </body> </html>總結(jié)
以上是生活随笔為你收集整理的文件下载重命名（跨域）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 商业视角
- 下一篇： apache mediawiki 安装_