Не удается отобразить pdf, передав Uint8Array в параметре файла viewer.html при использовании pdfjs - PullRequest
Новая
       25

Не удается отобразить pdf, передав Uint8Array в параметре файла viewer.html при использовании pdfjs

0 голосов
/ 12 февраля 2019

Я пытаюсь создать приложение с электроном и реагировать, в котором я пытаюсь сделать PDF-файл, используя pdfjs из локальной файловой системы.Я получу pdf-данные от электроники, которые затем будут переданы для реагирования приложения.

После прохождения кода для файла viewer.js я вижу, что могу отправить значение параметра файла как Uint8Array и, в свою очередь,он вызывает getDocument PDFJS с data , поэтому я попробовал небольшой пример, но почему-то я не могу заставить его работать.

Вставка приведенного ниже кода 

base64ToUint8Array = () => {
// taken from pdfjs github example
let raw = atob(
  'JVBERi0xLjcKCjEgMCBvYmogICUgZW50cnkgcG9pbnQKPDwKICAvVHlwZSAvQ2F0YWxvZwog' +
  'IC9QYWdlcyAyIDAgUgo+PgplbmRvYmoKCjIgMCBvYmoKPDwKICAvVHlwZSAvUGFnZXMKICAv' +
  'TWVkaWFCb3ggWyAwIDAgMjAwIDIwMCBdCiAgL0NvdW50IDEKICAvS2lkcyBbIDMgMCBSIF0K' +
  'Pj4KZW5kb2JqCgozIDAgb2JqCjw8CiAgL1R5cGUgL1BhZ2UKICAvUGFyZW50IDIgMCBSCiAg' +
  'L1Jlc291cmNlcyA8PAogICAgL0ZvbnQgPDwKICAgICAgL0YxIDQgMCBSIAogICAgPj4KICA+' +
  'PgogIC9Db250ZW50cyA1IDAgUgo+PgplbmRvYmoKCjQgMCBvYmoKPDwKICAvVHlwZSAvRm9u' +
  'dAogIC9TdWJ0eXBlIC9UeXBlMQogIC9CYXNlRm9udCAvVGltZXMtUm9tYW4KPj4KZW5kb2Jq' +
  'Cgo1IDAgb2JqICAlIHBhZ2UgY29udGVudAo8PAogIC9MZW5ndGggNDQKPj4Kc3RyZWFtCkJU' +
  'CjcwIDUwIFRECi9GMSAxMiBUZgooSGVsbG8sIHdvcmxkISkgVGoKRVQKZW5kc3RyZWFtCmVu' +
  'ZG9iagoKeHJlZgowIDYKMDAwMDAwMDAwMCA2NTUzNSBmIAowMDAwMDAwMDEwIDAwMDAwIG4g' +
  'CjAwMDAwMDAwNzkgMDAwMDAgbiAKMDAwMDAwMDE3MyAwMDAwMCBuIAowMDAwMDAwMzAxIDAw' +
  'MDAwIG4gCjAwMDAwMDAzODAgMDAwMDAgbiAKdHJhaWxlcgo8PAogIC9TaXplIDYKICAvUm9v' +
  'dCAxIDAgUgo+PgpzdGFydHhyZWYKNDkyCiUlRU9G');
let uint8Array = new Uint8Array(new ArrayBuffer(raw.length));
for (var i = 0; i < raw.length; i++) {
  uint8Array[i] = raw.charCodeAt(i);
}
return uint8Array;


render(){ 
let pdfUint8Array = this.base64ToUint8Array(); 

return(
  <iframe

    src={`/web/viewer.html?file=${pdfUint8Array}`}
    title="frame"
    width="100%"
    height="700px" 
  />
);

}

Из ошибки на консоли браузера я вижу, что значение параметра файла по-прежнему принимается как url, следовательно, pdf не получается

Error
fetch_stream.js:101 GET http://localhost:3001/web/37,80,68,70,45,49,46,55,10,10,49,32,48,32,111,98,106,32,32,37,32,101,110,116,114,121,32,112,111,105,110,116,10,60,60,10,32,32,47,84,121,112,101,32,47,67,97,116,97,108,111,103,10,32,32,47,80,97,103,101,115,32,50,32,48,32,82,10,62,62,10,101,110,100,111,98,106,10,10,50,32,48,32,111,98,106,10,60,60,10,32,32,47,84,121,112,101,32,47,80,97,103,101,115,10,32,32,47,77,101,100,105,97,66,111,120,32,91,32,48,32,48,32,50,48,48,32,50,48,48,32,93,10,32,32,47,67,111,117,110,116,32,49,10,32,32,47,75,105,100,115,32,91,32,51,32,48,32,82,32,93,10,62,62,10,101,110,100,111,98,106,10,10,51,32,48,32,111,98,106,10,60,60,10,32,32,47,84,121,112,101,32,47,80,97,103,101,10,32,32,47,80,97,114,101,110,116,32,50,32,48,32,82,10,32,32,47,82,101,115,111,117,114,99,101,115,32,60,60,10,32,32,32,32,47,70,111,110,116,32,60,60,10,32,32,32,32,32,32,47,70,49,32,52,32,48,32,82,32,10,32,32,32,32,62,62,10,32,32,62,62,10,32,32,47,67,111,110,116,101,110,116,115,32,53,32,48,32,82,10,62,62,10,101,110,100,111,98,106,10,10,52,32,48,32,111,98,106,10,60,60,10,32,32,47,84,121,112,101,32,47,70,111,110,116,10,32,32,47,83,117,98,116,121,112,101,32,47,84,121,112,101,49,10,32,32,47,66,97,115,101,70,111,110,116,32,47,84,105,109,101,115,45,82,111,109,97,110,10,62,62,10,101,110,100,111,98,106,10,10,53,32,48,32,111,98,106,32,32,37,32,112,97,103,101,32,99,111,110,116,101,110,116,10,60,60,10,32,32,47,76,101,110,103,116,104,32,52,52,10,62,62,10,115,116,114,101,97,109,10,66,84,10,55,48,32,53,48,32,84,68,10,47,70,49,32,49,50,32,84,102,10,40,72,101,108,108,111,44,32,119,111,114,108,100,33,41,32,84,106,10,69,84,10,101,110,100,115,116,114,101,97,109,10,101,110,100,111,98,106,10,10,120,114,101,102,10,48,32,54,10,48,48,48,48,48,48,48,48,48,48,32,54,53,53,51,53,32,102,32,10,48,48,48,48,48,48,48,48,49,48,32,48,48,48,48,48,32,110,32,10,48,48,48,48,48,48,48,48,55,57,32,48,48,48,48,48,32,110,32,10,48,48,48,48,48,48,48,49,55,51,32,48,48,48,48,48,32,110,32,10,48,48,48,48,48,48,48,51,48,49,32,48,48,48,48,48,32,110,32,10,48,48,48,48,48,48,48,51,56,48,32,48,48,48,48,48,32,110,32,10,116,114,97,105,108,101,114,10,60,60,10,32,32,47,83,105,122,101,32,54,10,32,32,47,82,111,111,116,32,49,32,48,32,82,10,62,62,10,115,116,97,114,116,120,114,101,102,10,52,57,50,10,37,37,69,79,70 404 (Not Found)

Я также вижу, когда консоль регистрирует параметры файла как file [object ArrayBuffer] , если я передаю pdfUint8Array.buffer в файле param, но pdf все еще не 't отображается как строка, так как pdfjs пытается отобразить ее с помощью URL.

Ответы [ 2 ]

0 голосов
/ 22 марта 2019

Моя главная цель здесь состояла в том, чтобы сделать pdf из моей локальной файловой системы в приложении для электронов, которое я создаю.

Мой более ранний подход состоял в том, чтобы передать необработанные данные base64 pdf в iframe с помощью srcкак web / viewer.html из pdfjs, но из-за некоторых ограничений в электронике это не сработало.

Итак, я нашел простое решение, которое, запустив электрон, я запускал сервер узлов в каталоге изгде я хотел обслуживать PDF-файлы и использовал URL в форме http://localhost/{port_number}/{path_to_my_pdf_files} для доступа к PDF в pdfjs 

<iframe

    src={`/web/viewer.html?file=http://localhost:${process.env.REACT_APP_PDF_SERVER_PORT}/${path}`}
    title="iframe"
    width="100%"
    height="700px" 
  />
0 голосов
/ 13 февраля 2019

CodeSAndbox Demo (откройте результат codesAndbox в новой вкладке, чтобы он работал)

Привет, Хитен,

Видимо в официальных документах Mozilla для PDF.js. Говорят, что не нужно преобразовывать в байтовый массив (uint8Array), вы можете непосредственно проанализировать код base64 в pdf ....

Просто перед тем, как сделать iframe с data:application/pdf;base64, переднеобработанные данные base64 вот так и появятся:) 

<iframe 
  title="frame"
  width="300px"
  height="700px"
  src={`data:application/pdf;base64,${this.base64PDF()}`} />

Хорошая ссылка в другом потоке Stackoverflow, обсуждающая рендеринг файла PDF с использованием base64 вместо url

Я надеюсь, что помог тебе 101

...