react-native-pdf-view - 如何使用base64或blob填充pdfView

我使用的是react-native-pdf-view庫，我無法用pdf填充PDFView。react-native-pdf-view - 如何使用base64或blob填充pdfView

我的項目是如何工作的，是我收到一個base64 PDF從服務器，我然後使用該庫react-native-fs像這樣保存到Android的文件系統：
（這工作正常）

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查看：

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

問題

react-native-pdf-view是否必須採用文件位置，還是可以採用base64 pdf或blob。

如果它可以採用base64或blob請解釋或提供示例代碼如何做到這一點。
感謝

注：This StackOverflow question是非常相似，但我需要知道如何以何種形式保存或檢索從文件系統，以及如何填充PDF以base64。

來源

2016-07-29 Larney

看作爲[源代碼（HTTPS：// github上。com/cnjon/react-native-pdf-view/blob/master/RNPDFView/RNPDFView.m＃L56），它似乎不接受base64，您將不得不提供一個路徑。爲了解決這個問題，我會''console.log''path/to/pdf'來確認它已經保存並且是一個很好的PDF。 –

@凱爾芬利感謝您指出。問題似乎是保存文件。看看這篇文章的更多細節。 http://stackoverflow.com/questions/38662309/how-to-save-pdf-to-android-file-system-react-native謝謝。 – Larney

對於有同樣問題的人，這裏是解決方案。

解

反應-nativive-PDF的視圖必須採取文件路徑pdf_base64。首先，我使用react-native-fetch-blob向服務器請求pdf base64（因爲RN獲取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} 
/>

來源

2016-08-06 13:30:08 Larney

什麼是「RESOLVE」功能？它似乎沒有被定義在任何地方，並且當我試圖運行你的代碼時給了我一個錯誤。 – Pedram

@Pedram「Resolve（）返回用給定值解析的Promise對象。」 - https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Promise – Larney

哦，我明白了。這只是在您的承諾得到解決時傳入並執行的回調。 – Pedram

好像有做到這一點更簡單的方法。只要告訴RNFletchBlob像這樣直接保存到磁盤。請注意，您必須稍後清理文件。

RNFetchBlob 
    .config({ 
    // add this option that makes response data to be stored as a file. 
    fileCache : true, 
    appendExt : 'pdf' 
    }) 
    .fetch('GET', 'http://www.example.com/file/example.zip', { 
    //some headers .. 
    }) 
    .then((res) => { 
    // the temp file path 
    this.setState({fileLocation: res.path()}); 
    console.log('The file saved to ', res.path()) 
    })

再後來

<PDFView 
    ref={(pdf)=>{this.pdfView = pdf;}} 
    path={this.state.fileLocation} 
    onLoadComplete = {(pageCount)=>{ 
    this.pdfView.setNativeProps({ 
     zoom: 1.0 
    }); 
    console.log("Load Complete. File has " + pageCount + " pages."); 
    }} 
    style={styles.pdf}/>

來源

2016-10-19 19:47:08 Pedram

react-native-pdf-view - 如何使用base64或blob填充pdfView

回答

相關問題