![](/img/trans.png)
[英]React Native PDF View “PDFView” was not found in the UIManager
[英]react-native-pdf-view - How to populate pdfView with base64 or blob
我正在使用react-native-pdf-view庫,我無法使用pdf填充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,請解釋或提供有關如何執行的示例代碼。
謝謝
Nb: 這個StackOverflow問題非常相似,但我需要知道如何從文件系統中保存或檢索base64以及如何填充pdf。
對於任何有相同問題的人,這是解決方案。
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'庫更好地記錄並更容易理解。 ( 查看其FileSystem API文檔 )
接收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}
/>
似乎有一種更容易的方法來做到這一點。 告訴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}/>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.