专栏首页OECOM前端图片下载

前端图片下载

2020-09-25 16:08:19

问题概要

前段时间遇到一个功能,挺简单,下载附件。自己也觉得很简单,于是开开心心写下了如下代码:

<a href="文件地址" download >文件名称</a>

然后放到在测试的时候自信的点了一下,然后不开心了,图片直接被打开了,根本没有下载,但是有的是可以下载的,很奇怪。

问题原因

经过仔细分析发现,当文件地址和当前页面同源时可以正常下载,当非同源时就下载失败了。

解决办法

既然找到了问题所在,那么解决起来就很方便了,之前我写过一篇文章,是通过服务器中转的方式来实现的,将非同源的文件转成同源,于是就可以下载了:传送门

如果不经过后台,直接通过前端来实现,也有相应的方法,我们来看一下:

downloadImg(src,name){
    console.log(src)
    var x=new XMLHttpRequest();
    //禁止浏览器缓存;否则会报跨域的错误
    x.open("GET", src+'?t='+new Date().getTime(), true);
    x.responseType = 'blob';
    x.onload=function(e){
      var url = window.URL.createObjectURL(x.response)
      var a = document.createElement('a');
      a.href = url
      a.download = name
      a.click()
    }
    x.send();
  }

缺陷:这种方法需要图片服务器允许跨域才可能实现。

通过后台中转的方式就无需特殊条件,只不过增加了服务器的流量及带宽。

所以,如何取舍还看自身条件来选择合适的方式来实现即可。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • js的深拷贝和浅拷贝

    说到深拷贝与浅拷贝,为什么会有这两种概念呢,根本原因就在于js的两种数据类型:基本数据类型和引用数据类型,两种数据类型存储方式不同。

    无邪Z
  • js文件异步上传进度条

    进度条的应用是为了显示的告诉用户文件上传了多少,对于小文件的上传基本上应用不到进度条。进度条主要应用于大文件的上传,在于告诉用户上传情况,不至于让用户无状态等待...

    无邪Z
  • 校验身份证号码

    之前在做项目的时候遇到了需要校验身份证号码,最初始的想法就是校验一下是否数字还有就是校验长度,后来想到有的身份证号的最末尾数字是X,于是又加入了一层判断末尾数为...

    无邪Z
  • 计算机基础,Python基础--变量以及简单的循环

    一、计算机基础 1.CPU   相当于人体的大脑,用于计算处理数据。 2.内存    用于存储数据,CPU从内存调用数据处理计算,运算速度很快。 PS:问:...

    新人小试
  • Python之逻辑运算和缩进和选择if

    作者:Vamei 出处:http://www.cnblogs.com/vamei 欢迎转载,也请保留这段声明。谢谢!

    bear_fish
  • SwiftUI 中的Stack

    就从Stack说起,stack查看文档我们看到HVZ三种stack,那么分别是怎么用的呢?

    大话swift
  • Day-01 Python基础

      Python是一门解释型,弱类型,高级开发编程语言;可广泛应用于众多领域,如:网页开发,数据分析,爬虫等众多领域。

    py3study
  • python 练习购物车小程序

    程序员同行者
  • python学习之异常处理

    py3study
  • python核心编程2 第五章 练习

    5-2 运算符 (a) 写一个函数,计算并返回两个数的乘积 (b) 写一段代码调用这个函数,并显示它的结果

    py3study

扫码关注云+社区

领取腾讯云代金券