Question

我有一个非常简单的问题，但遗憾的是无法找到解决方案。我注意到Stack Overflow上有很多类似的问题，但没有一个完全符合我的问题。

我有一个基于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� ...

使用以下内容显示在同一窗口中：

document.open();
document.write(data);
document.close();

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

dataType: "application/pdf"

无论我做什么，我总是会显示这些垃圾。

我不想做的事情：

将pdf作为api服务器上的链接公开
在Web服务器上创建一个路径以下载和存储pdf api服务器并公开链接。

我必须做的事情：

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

理想情况下我想要实现的目标：

将pdf流显示为灯箱中的文档，或者只是取消它无论如何，但不是垃圾格式。我知道回来了垃圾工作正常，因为我可以在Android上正确显示pdf。

非常感谢提前 ž

Answer 1

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

然后，在客户端上，您可以简单地重定向到接受查询字符串参数的方法，而不是使用$ .ajax。

Answer 2

查看JavaScript blob。您可以使用Blob()轻松地制作它们，如下所示：

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

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

Answer 3

谢谢，但是当我用我的网络服务器端点联系api服务器pdf端点时，＆＃34;转发＆＃34;来自api服务器的reply.file（path_to_pdf）路由作为web服务器上的回复（data.data），在javascript中我只是做一个window.open（web_forwarding_endpoint）我再次得到垃圾。但是当我删除api服务器上的头部要求并执行相同的window.open（api_pdf_endpoint）时，我得到一个有效的pdf呈现。因此，问题必须在我的Web端点转发api端点响应的某处：（使用休息休息）：

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

当我将响应写入文件时，我会生成一个有效但空的pdf。当我回复回复时，我在网上得到了垃圾。也许我没有正确处理来自api服务器的响应reply.file（path_to_pdf），我无法将其写入Web服务器上的正确pdf文件或显示它。

使用来自Ajax调用的Javascript渲染PDF

3 个答案: