a 标签实现下载,在移动端变成了预览,让它一直能下载怎么改?

挑战
  • 588

a 标签什么时候是预览什么时候是下载?

   <a class="downloadButton" target="_blank" href="//xxxxx.pdf"
            download="xxxx.pdf">下载附件</a>
            
        function downloadFile() {
            var xhr = window.XMLHttpRequest ? new window.XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
            xhr.open('get', './asset/biddingDocuments.pdf', true);
            xhr.onreadystatechange = function () { };
            xhr.setRequestHeader('Content-Type', 'application/octet-stream');
            xhr.send('GET', './asset/biddingDocuments.pdf', true);
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    // 数据在 this.response 保存
                    var blob = new Blob([this.response], {
                        type: "application/octet-stream"
                    });
                    // 创建a链接 href链接地址 download为下载下来后文件的名称
                    var aa = document.createElement('a');
                    aa.href = URL.createObjectURL(blob);
                    aa.innerHTML = 'a链接';
                    aa.download = 'aa.pdf';
                    aa.style.display = 'none'; //隐藏a标签 直接调用a标签的点击事件
                    document.body.appendChild(aa);
                    aa.click();
                }
            }
        }
回复
阅读 1.7k
3 个回答
✓ 已被采纳

我一般使用ajax来做这类的,查看demo

downloadImgSrc:"https://i.picsum.photos/id/452/400/300.jpg?hmac=0-o_NOka_K6sQ_sUD84nxkExoDk3Bc0Qi7Y541CQZEs"
 downloadImg() {
    axios({
      url: this.downloadImgSrc, //URL,根据实际情况来
      method: "get",
      responseType: "blob"
    }).then(function (response) {
      const link = document.createElement("a");
      let blob = new Blob([response.data], { type: response.data.type });
      let url = URL.createObjectURL(blob);
      link.href = url;
      link.download = `实际需要的文件名.${response.data.type.split("/")[1]}`;
      link.click();
      document.body.removeChild(link);
    });
  },
safari
image.png

没办法使用download实现,主要方案是下载头,你可以把content-type返回成一个不识别的即可,当然,最好的方案是判断ua,然后返回针对性类型。

打开控制台看你的请求
如果你的图片请求返回的响应的 Content-Typeimage/*,audio/*等浏览器可以识别打开的文件,就不会去执行下载事件
如果你想要下载,不想要预览,请求的响应可以改成返回如 Content-Type:application/octet-stream, 指的是任意类型的二进制流数据,浏览器无法识别打开流数据,就会去下载。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏