下载个文件,谷歌浏览器直接给我打开了,我就只想直接下载。 - 前端笔记-用户点击下载多媒体文件(图片/视频等),最简单的方式: 1 ahref='url'download=filename.ext 下载 /a&...

学习笔记

点滴记忆
回忆过往
首页>> web前端 >>下载个文件,谷歌浏览器直接给我打开了,我就只想直接下载。 - 前端笔记
用户点击下载多媒体文件(图片/视频等),最简单的方式:

1
<a href='url' download="filename.ext">下载</a>
如果url指向同源资源,是正常的。

如果url指向第三方资源,download会失效,表现和不使用download时一致——浏览器能打开的文件,浏览器会直接打开,不能打开的文件,会直接下载。浏览器打开的文件,可以手动下载。

解决方案一:将文件打包为.zip/.rar等浏览器不能打开的文件下载。

解决方案二:通过后端转发,后端请求第三方资源,返回给前端,前端使用file-saver等工具保存文件。

 

如果url指向的第三方资源配置了CORS,download依然无效,但可以通过xhr请求获取文件,然后下载到本地。

/**
 * 用FileSave保存文件
 * @param url
 */
export function downloadUrlFile(url) {
  const xhr = new XMLHttpRequest();
  xhr.open('GET', url, true);
  xhr.responseType = 'blob';
  xhr.setRequestHeader('Authorization', 'Basic a2VybWl0Omtlcm1pdA==');
  xhr.onload = () => {
    if (xhr.status === 200) {
      // 获取图片blob数据并保存
      saveAs(xhr.response, 'abc.jpg');
    }
  };
  
  xhr.send();
}
  
/**
 * URL方式保存文件到本地
 * @param name 文件名
 * @param data 文件的数据
 */
function save(name, data) {
    var urlObject = window.URL || window.webkitURL || window;
    var export_blob = new Blob([data]);
    var save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a')
    save_link.href = urlObject.createObjectURL(export_blob);
    save_link.download = name;
    _fakeClick(save_link);
}
浏览器已经限制死跨域下载多媒体文件的各种方式。

×

感谢您的支持,我们会一直保持!

扫码支持
请土豪扫码随意打赏

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

打赏作者
版权所有,转载注意明处:前端笔记 » 下载个文件,谷歌浏览器直接给我打开了,我就只想直接下载。

发表评论

路人甲 表情
Ctrl+Enter快速提交

网友评论(0)