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

Question

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();
                }
            }
        }

Answer 1

我一般使用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

Answer 2

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

Answer 3

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