react-native-pdf-view-如何使用base64或blob填充pdfView [英] react-native-pdf-view - How to populate pdfView with base64 or blob

问题描述

我正在使用 react-native-pdf-view 库，我在用PDF填充PDFView时遇到问题.

I am using the react-native-pdf-view library and I am having trouble populating the PDFView with a pdf.

我的项目的工作方式是我从服务器收到base64 pdf，然后使用库

How my project works is that I receive a base64 pdf from the server where I then save to the android file system by using the library react-native-fs like so:
(This works fine)

saveFile(filename){

   var base64Image = this.state.imageBase64;

   // 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!');
     this.setState(
       {pdf_dirPath: path}
     );
     this._display_fileAttachment()
   })
   .catch((err) => {
     console.log(err.message);
   });
 }

然后我尝试使用以下命令填充pdf视图:

I then try populate the pdf view with this:

<PDFView
  ref={(pdf)=>{this.pdfView = pdf;}}
  src={"path/To/base64/pdf"}
  style={styles.pdf}
 />

问题

react-native-pdf-view是否必须具有文件位置，还是可以采用base64 pdf或blob.

Does the react-native-pdf-view have to take a file location or can it take a base64 pdf or a blob.

如果可以使用base64或blob，请说明或提供示例代码来说明如何实现.
谢谢

If it can take a base64 or blob please explain or give sample code on how to do it.
Thanks

Nb:这个StackOverflow问题非常相似，但我需要知道如何以何种形式从文件系统中保存或检索base64，以及如何填充pdf.

Nb: This StackOverflow question is very similar but I need to know how in what form to save or retrieve the base64 from the file system and how to populate the pdf.

推荐答案

对于有相同问题的任何人，这是解决方案.

For anyone having the same problem, here is the solution.

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

react-nativive-pdf-view must take the file path to the pdf_base64.

首先，我使用了 react-native-fetch-blob 请求来自服务器的pdf base64.(因为RN提取API尚不支持BLOB).

Firstly, I used the react-native-fetch-blob to request the pdf base64 from the server.(Because RN fetch API does not yet support BLOBs).

我还发现react-native-fetch-blob还具有FileSystem API，与'react-native-fs'库相比，它具有更好的文档记录和更易于理解. (查看其FileSystem API文档 )

Also I discovered that react-native-fetch-blob also has a FileSystem API which is way better documented and easier to understand than the 'react-native-fs' library. (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保存到文件位置.我是这样保存的:

What I was doing wrong was instead of saving the pdf_base64Str to the file location like I did in the example above. I was saving it like this:

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

错了.

使用文件路径填充PDF视图:

<PDFView
    ref={(pdf)=>{this.pdfView = pdf;}}
    src={pdfLocation}
    style={styles.pdf}
/>

这篇关于react-native-pdf-view-如何使用base64或blob填充pdfView的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！