Как создать PDF в React JS, используя байтовые данные

Question

Я получаю ответ от остальных API как:

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

Как получить ответ внутри и сгенерировать pdf, используя React js

Answer 1

Вы можете просто добавить на вкладке объекта в реагировать

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

Answer 2

Я предполагаю, что байты в теге <PDFContent> являются base64 кодированными байтами файла PDF.Если это неверно, вам необходимо обновить REST API, чтобы сначала выполнить кодирование base64 в байтах PDF.Вы не можете заставить свой сервер отправлять необработанные байты PDF веб-клиенту как есть.

В javascript, как только вы получили закодированные в base64 байты PDF, вы можете сгенерировать PDF в два этапа:

1. Преобразование байтов в кодировке base64 в большой двоичный объект PDF.
2. Создание 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>