Question

我从rest api得到响应：

 <Response>
 <PDFContent>SlZCRVJpMHhMalFLSmVMano5TUtNU0F3SUc5aWFnbzhQQzlUTDBwaGRtRlRZM0pwY0hRdlNsTW9kR2hwY3k1NmIyOXRJRDBnTVRBd095aytQZ3BsYm1Sdlltb0tOU0F3SUc5aWFnbzhQQzlEYjJ4dmNsTndZV05sTDBSbGRtbGpaVWR5WVhrdlUzVmlkSGx3WlM5SmJXRm5aUzlJWldsbmFIUWdNVFV3TDBacGJIUmxjaTlHYkdGMFpVUmxZMjlrWlM5VWVYQmxMMWhQWW1wbFkzUXZWMmxrZEdnZ056Y3lMMHhsYm1kMGFDQTNNek0zTDBKcGRITlV3cjFTdkgvd0JvNy9rbm1uLzloV1AvQU5GUzBBZUFmOEozNHcvNkd2WFAvQmpOL3dERlVmOEFDZCtNUCtocXhycFg5L2V5ZlRZRURvYTRmdUNBNWNDQjFVSjJEd005cWwyZE9LbzlOSDVhVXdkdjVTVFRYbkMwVWVZbnlyVE5N6bnRLaXRSWHV1REUxUHNSL2lGQ2FpdGhvTUlacGQ0NmxMU0d3aVdZSkZoVVVaRm5KbnN5NHpPWE9BZS94ZDEIyOTBJREl6SURBZ1VpOVRhWHBsSURJMVBqNEtjM1JoY25SNGNtVm1DakUzT1RjMU5Rb2xKVVZQUmdvPQ==</PDFContent>
<Success>True</Success>
</Response>

如何使用React js获取响应并生成pdf

Answer 1

我假设<PDFContent>标签内的字节是PDF文件的base64编码字节。如果不正确，则需要更新REST API，以首先对PDF字节执行base64编码。您无法让服务器按原样将原始PDF字节发送到Web客户端。

在javascript中，一旦收到base64编码的PDF字节，就可以分两步生成PDF：

将base64编码的字节转换为PDF BLOB。
从此BLOB中创建文件URL，然后打开URL。

这是相同的示例JavaScript代码：

<script>
    function displayPDF() {
        //The PDFContent bytes are mapped to an input element called pdfString
        if($('#pdfString').val() == '')
            return;
        var file = b64toBlob($('#pdfString').val(), 'application/pdf');
        //If the browser is IE or Edge
        if (window.navigator && window.navigator.msSaveOrOpenBlob) {
            window.navigator.msSaveOrOpenBlob(file);
        }
        else {
            var fileURL = URL.createObjectURL(file);
            window.open(fileURL);
        }
    }

    function b64toBlob(b64Data, contentType, sliceSize) {
          contentType = contentType || '';
          sliceSize = sliceSize || 512;

          var byteCharacters = atob(b64Data);
          var byteArrays = [];

          for (var offset = 0; offset < byteCharacters.length; offset += sliceSize) {
            var slice = byteCharacters.slice(offset, offset + sliceSize);

            var byteNumbers = new Array(slice.length);
            for (var i = 0; i < slice.length; i++) {
              byteNumbers[i] = slice.charCodeAt(i);
            }

            var byteArray = new Uint8Array(byteNumbers);

            byteArrays.push(byteArray);
          }

          var blob = new Blob(byteArrays, {type: contentType});
          return blob;
    }
</script>

Answer 2

您只需在reactjs中添加对象选项卡

<div>
<object 
style={{width: '100%', height: '200pt'}} 
type="application/pdf" 
data={'data:application/pdf;base64,'+base64data}></object>
</div>

如何使用字节数据在React js中生成PDF

2 个答案: