使用 javascript 下载 PDF 文件而不在新选项卡中打开

Question

我正在使用下面的代码使用javascript下载pdf文件，它在桌面上运行得很好。但在移动设备上文件打不开。

function downloadFile(url, fileName) {
  var req = new XMLHttpRequest();
  req.open("GET", url, true);
  req.responseType = "blob";
  req.onload = function() {
    var blob = new Blob([req.response], {
      type: "application/pdf"
    });
    //Check the Browser type and download the File.
    var isIE = false || !!document.documentMode;
    if (isIE) {
      window.navigator.msSaveBlob(blob, fileName);
    } else {
      var url = window.URL || window.webkitURL;
      link = url.createObjectURL(blob);
      var a = document.createElement("a");
      a.setAttribute("download", fileName);
      a.setAttribute("href", link);
      document.body.appendChild(a);
      a.click();
      document.body.removeChild(a);
    }
  };
  req.send();
}

Answer 1

据我了解，出于安全和体验的考虑，手机浏览器经常会屏蔽自动下载。我想根据您的需求给您两个选择：

选项 1. 您可能想要修改用户方法并通过操作（例如单击按钮）触发下载

    function setupDownloadButton(url, fileName) {
        var button = document.createElement("button");
        button.innerText = "Download PDF";
        button.onclick = function() {
        downloadFile(url, fileName);
    };
        document.body.appendChild(button);
    }

这将调用

setupDownloadButton(yourURL, yourFileName)

，确保下载过程基于用户操作。

选项 2。 即使您应用选项 1，某些设备的自动下载也可能会失败。对于这种情况，您可以考虑处理移动设备的下载（您可以为移动用户显示 PDF 的直接链接，允许他们在自动下载失败时手动打开并保存）并单独下载桌面设备。

function downloadFile(url, fileName) {
    // Mobile detection
    var isMobile =/iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
    var req = new XMLHttpRequest();
    req.open("GET", url, true);
    req.responseType = "blob";

    req.onload = function() {
        var blob = new Blob([req.response], { type: "application/pdf" });
        if (isMobile) {
            // For mobile devices, open the PDF in a new tab
            window.open(URL.createObjectURL(blob), '_blank');
        } else {
            // For desktop browsers, proceed with the download
            var link = document.createElement("a");
            link.href = URL.createObjectURL(blob);
            link.download = fileName;
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
        }
    };
    req.send();
    }

我希望这能解决您的问题。