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

Z时代
2024-01-10
分类：技术分享

<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属性，但为什么是跳转新页面打开而不是下载？

如何才能直接下载？而不要跳转新页面打开

回答

分享一个我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();
};

按理说，加入 download 就可以了，所以可能是受到其他因素影响。

我看你链接后面拼接的信息比较多，建议使用排除法。

先使用最原始的文件链接：

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

尝试看看能不能下载下来。

如果不能，再尝试使用其他类似于.excel、.png文件，看看是不是其他代码端影响到的。

如果可以，就慢慢将后面的参数添加上去，也许就能找到问题。

以上仅是一个思路，希望对你有帮助。

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

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

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

download属性有跨域问题，

具体可以看这个链接：https://developer.mozilla.org...

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

用 blob: URL是要先发ajax请求，再转成blob下载。

我试了下，这个图片地址用ajax请求也有跨域问题。

可以用nginx做反向代理，a标签的href直接写同源的链接。

以上是 a标签已设置download属性，为什么还是跳转新页面打开而不是下载？的全部内容，来源链接： utcz.com/a/20747.html

回到顶部