XMLHttpRequest 在浏览器中打开 PDF

Posted 2023-02-24

【中文标题】XMLHttpRequest 在浏览器中打开 PDF

【英文标题】：XMLHttpRequest to open PDF in browser

【发布时间】：2011-06-12 15:15:59

【问题描述】：

我想做 XMLHttpRequest，然后通过 POST 方法发送文件名，在浏览器中打开一个 PDF。

   xmlhttp.open("POST","pdf.php",true); //CHANGE
   xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
   xmlhttp.send("file="+input);

这可能还是 XMLHttpRequest 仅适用于 html？

【问题讨论】：

您正在尝试使用 javascript 动态加载 PDF？

是的！也许这会有所帮助：***.com/questions/133925/…

【参考方案1】：

如果您查询的 URL 实际返回 PDF 数据，则无法通过 XMLHttpRequest 进行。

为什么？因为响应是包含原始 PDF 数据的 HTTP 响应。没有 JavaScript 功能可以用包含在该数据中的 PDF 的呈现替换当前文档的 DOM 内容，即使您确实可以通过 responseText` 属性访问数据（另请参阅 http://www.w3.org/TR/XMLHttpRequest/#the-responsetext-attribute）。

您可以做的是将 PDF 文件生成为可通过 Web 服务器中的 URL 访问的临时文件，然后让脚本发回 URL 以访问该文件。

当您的响应处理程序处理 URL 时，它可以：

通过更改window.location.href = new_pdf_url重新加载当前页面

通过更改 iframe 的 src 属性将其加载到当前文档内的 <iframe> 中

window.open(new_pdf_url, XXX)在单独的窗口中打开

请注意，您仍然需要指向临时文件位置的 URL 才能打开新窗口

【讨论】：

但是我可以在新窗口中打开它吗？

@user583311 - 如果您的 URL 指向临时 PDF 文件，您只能打开一个新窗口。基本上，没有原生 JavaScript 机制可以从非 HTML 内容生成“DOM 文档”。您的浏览器可能有一个插件来呈现该内容，但您不能强制该插件呈现，除非浏览器的文档是从头开始（重新）加载的。你为什么不干脆做window.open('pdf.php?file='+input, XXX)？

【参考方案2】：

如果您在同一个窗口中打开 PDF，则使用 XmlHttpRequest 没有意义，只需从您的 javascript 中设置 window.location（window.location.assign("http://example.com/location/file.pdf")，window.location.href="http://etc），而不是调用 XmlHttpRequest。 （如果您从 XmlHttpRequest 收到 PDF 字节，您将如何说服浏览器使用 PdfPluginX 显示它？）

如果您希望在 新 浏览器窗口中显示 PDF，只需直接从您的 javascript 中使用 window.open(...)。

【讨论】：

我不想在保管箱中透露 PDF 的位置。我有一个接收 POST 值并显示 PDF 的 pdf.php。我只需要等待通过 javacript 将 POST 发送到 pdf.php。

【参考方案3】：

是的，可以这样做，首先你需要将文件作为arrayBuffer，然后用一个新的blob创建一个对象url，然后分配给src。

    var xhr = new XMLHttpRequest();
    xhr.open('GET', url, true);
    xhr.type = 'arraybuffer';
    xhr.onreadystatechange = function() 
        if (xhr.readyState == 4 && xhr.status == 200)
           var blobSrc = window.URL.createObjectURL(new Blob([this.response],  type: 'application/pdf' ));
           // assign to your iframe or to window.open
           yourIframe.src = blobSrc;
            

【参考方案4】：

你可以试试这个：

    var xmlHttp = new XMLHttpRequest();
    xmlHttp.onreadystatechange = function() 
        if (xmlHttp.readyState == 4 && xmlHttp.status == 200)           
       var file = window.URL.createObjectURL(xmlHttp.response);
        var a = document.createElement("a");
        a.href = file;      window.open(file);
            
    
    xmlHttp.open("GET", '/pdf', true); // true for asynchronous     xmlHttp.responseType= "blob";
    xmlHttp.send(null);