CODEWITHSUNDEEP
node.jsangularrestpdf
Schweit
Schweit

Reputation: 21

Opening PDF from API response to new tab in Angular

I could really use some help here, I have spent nearly three days on this.

Within my Node application I have an API call that uses https call to an external API to return a PDF which looks like the below code. (I understand I could call the external API from the frontend Angular code, however corporate rules prevent me from doing so)

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

Node then returns the PDF (in plain/text), which I am able to view the pdf data with the Chrome devtools. This is where im getting lost. I am trying convert the pdf data into a blob and then open the pdf in a new tab but when the new tab opens I get a dialog saying "Failed to load PDF document." The Angular code works if I hardcode a test pdf file and return it to the frontend, it does exactly what I need it too. 

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

Unfortunately, I have exhausted all the google resources I could find and have tried alot more than just the above. I'd appreciate any input I could get on this. Thanks!

Upvotes: 2

Views: 9367

Answers (1)

Harshal Patil
Harshal Patil

Reputation: 6759

Node Response, You need to import fs library,

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

Your angular code,

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

Upvotes: 1

Related Questions