Как сохранить PDF в файловую систему Android, а затем просмотреть PDF

Я использую react-native-fs и пытаюсь сохранить base64 pdf в мою файловую систему эмуляторов Android.

Я получаю с сервера PDF-файл в кодировке base64.
Затем я декодирую строку base64 с помощью строки:

var pdfBase64 = 'data:application/pdf;base64,'+base64Str;

функция saveFile()

saveFile(filename, pdfBase64){

    // create a path you want to write to
    var path = RNFS.DocumentDirectoryPath + '/' + filename;

     // write the file
     RNFS.writeFile(path, base64Image, 'base64').then((success) => {
       console.log('FILE WRITTEN!');
     })
     .catch((err) => {
       console.log("SaveFile()", err.message);
     });
}

Ошибка
Когда я пытаюсь сохранить pdfBase64, функция saveFile() обнаруживает следующую ошибку:

bad base-64

Вопрос
Может ли кто-нибудь сказать, где или что я делаю неправильно? Спасибо.


react-native react-native-android base64 react-native-fs
person Larney    schedule 29.07.2016    source источник

Ответы (3)


arrow_upward
21
arrow_downward

Для тех, у кого такая же проблема, вот решение.

Решение

react-native-pdf-view должен указать путь к файлу pdf_base64.

Во-первых, я использовал react-native-fetch-blob для запроса pdf base64 с сервера.( Поскольку API выборки RN еще не поддерживает BLOB).

Также я обнаружил, что у react-native-fetch-blob также есть API файловой системы, который намного лучше документирован и легче для понимания, чем библиотека «react-native-fs». (ознакомьтесь с документацией по API файловой системы)

Получение файла pdf в формате base64 и его сохранение по пути к файлу:

var RNFetchBlob = require('react-native-fetch-blob').default;

const DocumentDir = RNFetchBlob.fs.dirs.DocumentDir;

getPdfFromServer: function(uri_attachment, filename_attachment) {
   return new Promise((RESOLVE, REJECT) => {

      // Fetch attachment
      RNFetchBlob.fetch('GET', config.apiRoot+'/app/'+uri_attachment)
      .then((res) => {

          let base64Str = res.data;
          let pdfLocation = DocumentDir + '/' + filename_attachment;

          RNFetchBlob.fs.writeFile(pdfLocation, pdf_base64Str, 'base64');
          RESOLVE(pdfLocation);
      })
   }).catch((error) => {
       // error handling
       console.log("Error", error)
   });
}

Что я делал неправильно, так это то, что вместо сохранения pdf_base64Str в папку с файлом, как я сделал в примере выше. Я сохранял это так:

var pdf_base64= 'data:application/pdf;base64,'+pdf_base64Str;

что было не так.

Заполнить представление PDF путем к файлу:

<PDFView
    ref={(pdf)=>{this.pdfView = pdf;}}
    src={pdfLocation}
    style={styles.pdf}
/>
person Larney    schedule 06.08.2016
comment
каково значение pdf_base64Str, вы никогда не давали никакого значения в ответе. - person anbu selvan; 30.05.2018
comment
@anbuselvan, не могли бы вы найти здесь, что такое pdf_base64Str? - person David; 01.11.2019
comment
что такое pdf_base64Str?? я не вижу здесь никакой переменной - person ASN; 13.05.2020

arrow_upward
0
arrow_downward

Существует новый пакет для обработки выборки (на основе react-native-fetch-blob) и отображение PDF-файла по URL-адресу: react-native-pdf.

person Johannes Filter    schedule 02.07.2017

arrow_upward
0
arrow_downward

Удалите тип приложения в строке base64, и он работает для меня

var pdfBase64 = 'data:application/pdf;base64,'+base64Str;

To

var pdfBase64 = base64Str;
person Akshay I    schedule 19.05.2021