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

Question

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

在我的 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

-节点

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

Node 然后返回 PDF（纯文本/文本），我可以使用 Chrome 开发工具查看 pdf 数据。这就是我迷路的地方。我正在尝试将 pdf 数据转换为 blob，然后在新选项卡中打开 pdf，但是当新选项卡打开时，我得到一个对话框，提示“加载 PDF 文档失败”。如果我硬编码一个测试 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);
});

不幸的是，我已经用尽了我能找到的所有谷歌资源，并且尝试了很多比上述更多的资源。我会很感激我能得到的任何意见。谢谢！

Answer 1

节点响应， 你需要导入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);
});