-2

I tried to code this html form in reactjs. So i create my server which do the request to the extern server , and the the response of the externe server is sent to my client. In my client i tried to convert he response to pdf. i get blank pages

this is the form that i tried to code in my react project

<HTML>
<HEAD>
  <TITLE>Simulation Web Services</TITLE>
</HEAD>
<BODY>

  <FORM method='POST' target='result' action='https://url....' accept-charset="UTF-8">
    <H3>File format PDF</H3>
    <TEXTAREA rows="20" cols="80" name='request'>
     <?xml version="1.0" encoding="UTF-8" standalone="yes"?>
       <...>
      </...>
   </TEXTAREA><BR />

<INPUT type='submit' value='Envoyer' />
  </FORM>
<BR />

</BODY>

And i my server i have this

app.post('/rapportpdf', function (req, res) {

console.log("sirennnn "+ req.siren)


var xmlBodyStr = `<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
   <...>

   </...>`;

var configfile = {
  headers: {
    'Content-Type': 'application/xml',
    'Cache-Control': 'no-cache',
  },
};

axios
  .post(
    'https://Url...',
    xmlBodyStr,
    configfile
  )
  .then(
    (ressultat) => {
     res.send({data: ressultat.data})

 });

});

and in my client I have the code below

Axios('/rapportpdf', {method: "POST", body: siren})
      //.then(response => response.json() )
      .then(({data}) => {
        data=data.data
        console.log(data);
        var file = new Blob([data], {type: 'application/pdf'});
        var fileURL = URL.createObjectURL(file);
        const link = document.createElement('a');
        link.href = fileURL;
        link.setAttribute('download', 'test.pdf');
        document.body.appendChild(link);
        link.click();
    })

and the format of the server response is like this

%PDF-1.4
%����
2 0 obj
<</ColorSpace/DeviceRGB/Subtype/Image/Height 1309/Filter/DCTDecode/Type/XObject/Width 2208/BitsPerComponent 8/Length 570306>>stream
����ExifII*��DuckyP���http://ns.adobe.com/xap/1.0/<?xpacket begin="" id="W5M0MpCehiHzreSzNTczkc9d"?> <x:xmpmeta xmlns:x="adobe:ns:meta/" x:xmptk="Adobe XMP Core 5.6-c148 79.164036, 2019/08/13-01:06:57        "> <rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"> <rdf:Description rdf:about="" xmlns:xmpMM="http://ns.adobe.com/xap/1.0/mm/" xmlns:stRef="http://ns.adobe.com/xap/1.0/sType/ResourceRef#" xmlns:xmp="http://ns.adobe.com/xap/1.0/" xmpMM:OriginalDocumentID="xmp.did:46DB15EC20D311EAA393A9AB844C7CA3" xmpMM:DocumentID="xmp.did:48D8C8F0217F11EAB56EA101C9DEA763" xmpMM:InstanceID="xmp.iid:48D8C8EF217F11EAB56EA101C9DEA763" xmp:CreatorTool="Adobe Photoshop CC 2015 (Windows)"> <xmpMM:DerivedFrom stRef:instanceID="xmp.iid:7ccda6f3-af1a-0540-b790-3f492bc75a0a" stRef:documentID="adobe:docid:photoshop:b088b14c-b252-8f43-aabe-45b88691b3dd"/> </rdf:Description> </rdf:RDF> </x:xmpmeta> <?xpacket end="r"?>��Adobed����       



������

!1AQaq"��2��B#��R���br3�W   �C$���Ss��4�%FVc�Dd���T5EU&6⣳t�'ąGe7
!1AQa�Tq��"R������2B�#U�br����3Dd�CE�$Sc4%s�e��?��������~#���ƞ����͋�x_����P���������7ռ޿�Bv���1?����=>4�>
i/��|��w|��1M�ÿ��|_��7Ԡ��ߕJ��z�[��F�/�����},;��~W4/�W�9�'
����a��o�^5�Q�5����t���T�?���g�E��a?��������TĿ���"W嗩��  �20�������Q����oTɛ嗩FSbt���4��)kN�j�D�xT3��~W��a�I��9�]���U���Bq��n�,
'�OU��'^_>$_�J���*�M�)=W{��ק�g����O�NO�������8?�W��0��{�XB�D��
���8<?ǩ�ƿ��~U��K�C' ���/�L?��偰�I�x��~�>,_�R���~X�_���hE�����
�����S��"��I��z|X|*�������-�P��������U(��o�%���_���+��u��
����ȧ���T)...
...
0001171594 00000 n 
trailer
<</Info 171 0 R/ID [<5cb3337bb08e98c404e797418d5d7d84><4c77bcc78b92612693ec3572ecab81d1>]/Root 170 0 R/Size 172>>
startxref
1171782
%%EOF
loveALgo
  • 13
  • 4

1 Answers1

2

[https://stackoverflow.com/questions/49134555/wrong-encoding-on-javascript-blob-when-fetching-file-from-server]

PDF files are really sensitive in terms of encoding. You need to make sure that the encoding is not changed in the process of retrieving the PDF binary data.

By default axios uses JSON as response type, so you need to specify the configuration entry:

axios.get(url, {responseType: "arraybuffer"}) ...
Juan Ramos
  • 557
  • 4
  • 14