[英]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.