从API响应打开PDF到Angular中的新选项卡

时间:2018-03-27 04:09:49

标签: node.js angular rest pdf

我真的可以在这里使用一些帮助,我花了将近三天的时间。

在我的Node应用程序中,我有一个API调用,它使用https调用外部API来返回一个类似于下面代码的PDF。 (我知道我可以从前端Angular代码调用外部API,但是公司规则阻止我这样做)

%PDF-1.5
%������
1 0 obj
<<
/Author (XXXX)
/CreationDate (XXX)
/ModDate (XXXX)
/Creator (EXXXX)
/Title (XXXX)
/Producer (XXXX)
/Subject (XXXX)
>>
endobj
7 0 obj
<</Length 5273 /Filter /FlateDecode >>
stream
x��\�s[����?`��;�|�Cf:Z������i:Fz�y�H������=����w��HJv���3�>���b���=J)yA(�~~�.0��7������~]���_��f0-~2�S������$W���g�=�O�w�!�t3��e��`=fQ�Qc/��L�G�nrs#�U%��������������N+@F���G'L���������/�/�?GW��=�)�J�*
���
��9�����������    y08:}F���"g�o�'#rzN�N���)y��Y��v8���z��>���d@�=}z�+����������v~!N��P�z�@O<�Ov|�[F�v��w���3&(��    S��XLb������>!&$TN�r1�L�����*7j8�v���b��kZ�  ��1�M"�2�v �u��NJ���.��'�A��:
�
D ;,3%�d=��|�S ��;<<:�H������O���j�_�����G����!--�����W����x�"'����<��xQ�����iMVs�z1�irY����9���K2���/����^N�8n�5Z�O�^�g����$��xU_sU���dQ�4��`���Om�0��g5�/�s�|y9YM���4��:a=�Z�������G^O���&��2���B����k~�"o��]�_OV��|V�.�W����`.9�[[�hE����'��k���~f|{���PI��3T��*-����wqI.��'���+���EM86��8Z���=+��7�\'�L�1�?�/z���H��<�#�2��V�Mla\9[�x�2I4n�yE5�m�(��[q�z6���p�v�GC�t�uu��bZ�yv}���fy���`oJ�/��s(���b�_���3=�c���t��*����)DnK��y�bP,m(0�e�[0���2�t������y�<�tjq8�S���P��tP>"����)H�����8U�=qj����&��L���^�V,{=Zn�VU�z2�����Q���63caR!�wbm�\"Y�s{���H�,b����A'#���]�����<���(�(O/�8�_�������9�P��������68w?hB��]�q�J�2F�+[Kx�=F��4p�Q#�H�uZ�=�y~�����Pn�Z�C����*������_\��S�`��T���3Kot���Z�D��V�<BD;�S%�N��Q��`�����'e����������D���
��fGO�a�X[�{���2����gjOH��v�y4�(o������Lp����c�J�uc��=�)oK���QnTk7���M�=�:�P�N�2�m�[P��gG�6��mPghZ��Z�o�,C��H�J
��$&T���Y�3z?���W��e��O;��4�=���&���

.....(ALOT MORE)

%%EOF

-Node

var options = {
        host: config.fake.host,
        path: config.fake.apiUrl + pdfId,
        method: 'GET',
        rejectUnauthorized: false,
        headers: config.fake.headers
      };
      console.log(options);
      api.getCall(options, function (status, response) {
        res.status(status).send(response);
      });
然后

节点返回PDF(纯文本/文本),我可以使用Chrome devtools查看pdf数据。这就是我迷路的地方。我正在尝试将pdf数据转换为blob,然后在新选项卡中打开pdf,但是当新选项卡打开时,我会得到一个对话框,说明&#34;无法加载PDF文档。&#34;如果我对测试pdf文件进行硬编码并将其返回到前端,Angular代码就可以工作,它也完全符合我的需要。

this._http.get(url, {responseType: 'blob'}).subscribe( data => {
    console.log(data);
    var file = new Blob([data], {type: 'application/pdf'});
    var fileURL = URL.createObjectURL(file);
    window.open(fileURL);
});

不幸的是,我已经用尽了所有可以找到的谷歌资源,并尝试了不仅仅是上面的内容。我很感激我能得到的任何意见。谢谢!

1 个答案:

答案 0 :(得分:0)

节点响应, 您需要导入fs库,

fs.stat(filepath, (err, stat) => {

    res.setHeader('Content-Length', stat.size);
    res.setHeader('Content-Type', 'application/pdf');
    res.setHeader('Content-Disposition', 'attachment; filename=filename.pdf');

    const file = fs.createReadStream(filepath);
    file.pipe(res);
});

您的角度代码,

this._http.get(url, {responseType: ResponseContentType.ArrayBuffer}).subscribe( data => {
    var file = new Blob([data.blob()], {type: 'application/pdf'});
    var fileURL = window.URL.createObjectURL(file);
    window.open(fileURL);
});