我试图用reactjs编写这个html表单。因此，我创建了我的服务器，它向外部服务器发出请求，外部服务器的响应被发送到我的客户端。在我的客户中，我试图将他的回复转换为pdf。我收到空白页
这是我试图在react项目中编写的表单
<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>
我的服务器上有这个
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})
});
});
在我的客户端中，我有下面的代码
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();
})
服务器响应的格式类似于这个
%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
[https://stackoverflow.com/questions/49134555/wrong-encoding-on-javascript-blob-when-fetching-file-from-server]
PDF文件在编码方面非常敏感。您需要确保在检索PDF二进制数据的过程中编码没有更改。
默认情况下，axios使用JSON作为响应类型，因此您需要指定配置条目：
axios.get(url, {responseType: "arraybuffer"}) ...