a标签已设置download属性，但为什么是跳转新页面打开而不是下载？

Question

<a href="http://qr.topscan.com/api.php?text=http://www.makusi.cn/Home/Index/index/ws/YGdllmdj&amp;w=1000&amp;m=100&amp;el=l" download="1---1st_for_test_sample">png</a>

a标签已设置download属性，但为什么是跳转新页面打开而不是下载？
如何才能直接下载？ 而不要跳转新页面打开

Answer 1

分享一个我js下载的代码， 如果属性都一样 那就看看具体的地址里面是否有特殊字符之类的导致语义混乱了

export default (url, name) => {
  const link = document.createElement('a');
  link.setAttribute('download', name);
  link.setAttribute('href', url);
  Object.assign(link.style, {
    position: 'absolute',
    top: 0,
    opacity: 0,
  });
  document.body.appendChild(link);
  link.click();
  link.remove();
};

Answer 2

download属性有跨域问题，
具体可以看这个链接：https://developer.mozilla.org...

注意:

• 此属性仅适用于同源 URL。
• 尽管 HTTP URL 需要位于同一源中，但是可以使用 blob: URL 和 data: URL ，以方便用户下载使用 JavaScript 生成的内容（例如使用在线绘图 Web 应用程序创建的照片）。

用 blob: URL是要先发ajax请求，再转成blob下载。
我试了下，这个图片地址用ajax请求也有跨域问题。

可以让后端配合一下，设置个响应头处理跨域问题，前端 ajax + blob。
或者用nginx做反向代理，a标签的href直接写同源的链接。

Answer 3

移动端建议：点击事件后触发 location.href=XX，之前我也弄过其他方案，但在手机端有兼容问题，发现这个最稳??。如果是PC端，当我没说！！

Answer 4

按理说，加入 download 就可以了，所以可能是受到其他因素影响。
我看你链接后面拼接的信息比较多，建议使用排除法。
先使用最原始的文件链接：

http://qr.topscan.com/api.php

尝试看看能不能下载下来。
如果不能，再尝试使用其他类似于.excel、.png文件，看看是不是其他代码端影响到的。
如果可以，就慢慢将后面的参数添加上去，也许就能找到问题。
以上仅是一个思路，希望对你有帮助。

Answer 5

记得在pc端，是使用window.location.href='http://*'这个方法进行的

Answer 6

download只有火狐和chrome支持，兼容性不太好。我在自己chrome试了下是可以下载；

Answer 7

我记得下载有同源的要求吧，非同源现在浏览器应该禁止下载的

Answer 8

我写的下载库: https://github.com/Grewer/dow...
兼容除了移动端之外的浏览器,不会打开新页面