使用Ajax调用中的Javascript呈现PDF

我有一个非常简单的问题，但不幸的是找不到解决办法。我注意到在堆栈溢出上有许多类似的问题，但没有一个与我的问题完全匹配

我在node和hapi上构建了一个api服务器，它会返回生成的pdf文件：

reply.file("./" + cfg.docRawFolder + "/" + doc._id + ".pdf");

这个很好用。 现在我在hapi上也有一个web服务器，我想使用jquery和ajax联系api服务器上的pdf端点：

$.ajax({
          url: url,
          crossDomain: true,
          type:"GET",
          headers: {
            'Authorization': token1,
            'userid': userid,
            'deviceuid': deviceuid
          }
         }).done(function(data, textStatus, XMLHttpRequest) {
                  // some magic
         }).fail(function(err) {
            alert(JSON.stringify(err));
        });

我来的最远的地方就是去拿退回的垃圾：

%PDF-1.5 %���� 1 0 obj <> endobj 2 0 obj <> endobj 3 0 obj <>/ProcSet[/PDF/Text/ImageB/ImageC/ImageI] >>/MediaBox[ 0 0 595.32 841.92] /Contents 4 0 R/Group<>/Tabs/S>> endobj 4 0 obj <> stream x�s ���w3T04��30SI��2T0BCs=#3K=#��\^.�t�����TY��X������ 4�)����B��Yo���P{L̍��M�jC�s+�p� t��1�zd�C)� endstream endobj 5 0 obj <> endobj 6 0 obj <> endobj 7 0 obj <> endobj 8 0 obj [ 226 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 487 0 0 0 0 0 468 0 0 0 0 0 0 479 525 0 0 0 0 0 0 0 0 0 230 799 525 527 0 0 0 391 0 0 0 715 0 453] endobj 9 0 obj <> stream x��}x�U��9�;-S2%3�$�df2�$�� �C%�jB �)��bY{Y���2@����������� ۪�H��~�gm��ww�����I���������3��c.�hؤʺ1�����l&�u=c)oW�WN�6����5�1� ...

或通过将其添加到ajax调用来弹出：

dataType: "application/pdf"

不管我做什么，我总是把这些垃圾显示出来

我不想做的事：

在api服务器上将PDF公开为链接

在web服务器上创建一个路由，从中下载并存储pdf api服务器并公开一个链接

我要做的是：

对于GET请求传递3个自定义头：userid、deviceuid和 授权，所以我必须使用ajax，没有表单或iFrame

理想情况下，我希望实现：

将pdf流显示为lightbox中的文档，或者直接将其显示出来 不管怎样，但不是垃圾格式。我知道他回来了 垃圾工作正常，因为我可以在Android上正确显示pdf

非常感谢

---

Z

如果您可以在服务器上执行一些操作，那么您可以编写一个方法，将头作为查询字符串值接受，然后调用send请求，将这些头设置为您拥有的api，并将响应发送回客户端

---

然后，在客户端上，不使用$.ajax，只需重定向到接受查询字符串参数的方法。

检查JavaScript blob。您可以使用以下方法使其相当容易：

---

注意：我还没有对此进行测试，代码可能无法工作。在您的情况下，这更像是一种理论上使用blob的方法。

谢谢，但是当我用我的web服务器端点联系api服务器pdf端点，并从api服务器“转发”reply.file（path_to_pdf）路由，作为web服务器上的应答（data.data），在javascript中，我只做一个window.open（web_forwarding_端点）我又收到垃圾了。 但是，当我删除api服务器上的标题要求并执行相同的window.open（api\U pdf\U端点）时，我会得到一个有效的pdf呈现。 因此，问题一定出在我的web端点转发api端点响应的某个地方： （使用restling进行rest）：

当我将响应写入文件时，生成了一个有效但为空的pdf。当我回复回复时，我会在网上看到垃圾。

---

也许我没有正确处理来自api服务器的响应reply.file（路径到pdf），并且无法将其写入web服务器上的正确pdf文件或显示它。

我认为使用AJAX无法做到这一点。但是，您可以做的是将客户端重定向到提供所需PDF的URL。您无法将二进制文件显示为文本输出，否则可能会出现错误。文本需要Unicode（每个字符2个字节），因此会出错。

dataType: "application/pdf"

var dataBlob;
var data = [];
function onReceived(data_gotten) { //Whatever your receive callback is
    data.push(data_gotten);
    dataBlob = new Blob(data);
    var obj = document.createElement('object');
    obj.setAttribute('data', dataBlob);
    obj.setAttribute('type', 'application/pdf');
    document.body.appendChild(obj);
}

rest.get( api_pdf_endpoint_url , { headers: { 'Authorization': token1, 'userid': userid, 'deviceuid': deviceuid }
} ).then(
    function(data)
    {
        fs.writeFile("./public/pdf/" + request.params.documentid + ".pdf", data.data, function(err) // This writes an empty pdf file
        {
            if(err)
            {
                console.log(err);
            }

            else
            {
                reply({message: "OK"}).code(200); 
            }
        });

        //reply(data.data); This generates garbage
    },

    function(error)
    {
        console.log(error.error);
    }
);