【问题标题】：How to save pdf to android file system and then view PDF - react-native如何将pdf保存到android文件系统然后查看PDF - react-native
【发布时间】：2016-07-29 15:20:59
【问题描述】：

我正在使用react-native-fs，我正在尝试将 pdf 文件的 base64 保存到我的 android 模拟器文件系统。

我从服务器收到 base64 编码的 pdf。
然后我使用以下行解码 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 base64 react-native-android react-native-fs

【解决方案1】：

对于任何有同样问题的人，这里是解决方案。

解决方案

react-nativive-pdf-view 必须采用 pdf_base64 的文件路径。

首先，我使用react-native-fetch-blob 从服务器请求pdf base64。（因为RN fetch API 还不支持BLOB）。

我还发现 react-native-fetch-blob 也有一个 FileSystem API，它比“react-native-fs”库更好地记录和更容易理解。 (Check out its FileSystem API documentation)

接收base64 pdf并保存到文件路径：

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}
/>

【讨论】：

pdf_base64Str 的值是什么，您从未在答案中给出任何值。
@anbuselvan 你能在这里找到什么是 pdf_base64Str 吗？
什么是 pdf_base64Str??我在这里看不到任何变量

【解决方案2】：

有一个新包用于处理通过 URL 获取（基于 react-native-fetch-blob）和显示 PDF：react-native-pdf。

【讨论】：

【解决方案3】：

删除 base64 字符串中的应用程序类型，它对我有用

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

到

var pdfBase64 = base64Str;

【讨论】：