XMLHttpRequest打开浏览器中的PDF

Question

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

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

这是可能的，XMLHttpRequest不仅适用于HTML。

- user583311

---

你正在尝试使用Javascript动态加载PDF文件吗？ - Jonah

是的！也许这会有所帮助：https://dev59.com/3HVC5IYBdhLWcg3w9GLM - user583311

Answer 1

无法通过XMLHttpRequest实现，如果您查询的URL返回PDF数据，则无法执行此操作。

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

您可以做的是将PDF文件生成到临时文件中，并通过Web服务器上可访问的URL发送脚本以获取访问该文件的URL。

当响应处理程序处理URL时，它可以执行以下操作之一：

重新加载当前页面，方法是更改window.location.href = new_pdf_url 通过更改iframe的src属性，在当前文档内部加载它

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

请注意，仍然需要一个指向临时文件位置的URL来打开新窗口。

- DVK

---

但我能在新窗口中打开它吗？ - user583311

@user583311 - 只有在URL指向临时PDF文件时才能打开新窗口。基本上，没有本地JavaScript机制可以将非HTML内容生成“DOM文档”。您的浏览器可能具有呈现该内容的插件，但是除非从头开始重新加载浏览器的文档，否则无法强制该插件呈现。为什么不直接执行 window.open('pdf.php?file='+input, XXX) 呢？ - DVK

Answer 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(...)。

- Stephen P

---

我不想透露Dropbox上PDF文件的位置。我有一个pdf.php文件，它接收POST值并显示PDF文件。我只需要找到一种通过JavaScript将POST发送到pdf.php的方法。 - user583311

Answer 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;
        }    

- sendler

Answer 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);

- Muzammal Hussain