特定の環境(electron)でreact-pdfを使用しているため、http / https経由ではなく、fsからファイルを読み込むことができます。
onLoadSuccessが起動されていないようですが、正常ですか?
最初のページをレンダリングする前に、ページ数を取得する必要があります。
間違いなく正常ではありません! それ以外の場合、ファイルは完全にロードされますか? React-PDFの実装をここで共有できますか?
はい、ファイルは完全にロードされています。
安定版リリースと3アルファで試してみました。
私は何かを逃しましたか?
export default class PDFPlayer extends PureComponent {
state = {
fileLoaded: 0,
numPages: null,
pageNumber: 1,
}
componentWillMount() {
const { filePath } = this.props;
if (fs.existsSync(filePath)) {
fs.readFile(filePath, (err, file) => {
if (err) { console.log(err); }
this.file = new Uint8Array(file);
this.setState({ fileLoaded: 1 });
});
}
}
onLoadSuccess = (pdf) => {
console.log('onDocumentLoad', pdf);
this.setState({ numPages: pdf.numPages });
}
onRenderSuccess = (page) => {
console.log(page.originalHeight);
}
render() {
const { fileLoaded } = this.state;
if (!fileLoaded) return null;
return (
<div style={{ ...styles.container, height: document.body.offsetHeight }}>
<Document
ref={(doc) => { this.document = doc; }}
file={{ data: this.file }}
onLoadSuccess={this.onLoadSuccess}
>
<Page onRenderSuccess={this.onRenderSuccess} pageNumber={1} />
</Document>
</div>
);
}
}
それは完全に大丈夫に見えます! 少なくともonSourceSuccessコールバックを取得するかどうか疑問に思います...!
ちなみに、これほどの作業は必要ないと思います。
fs.readFile
受け取ったものは何でも受け入れられると思います。file={this.file}
も大丈夫です。また、ヒントとして、componentWillMountは間もなく非推奨になります。componentDidMountにドキュメントをロードしてみてください:)
ヒントをありがとう、私はcomponentDidMount
変更しました
Uint8Array
ハックを見つけました。最初のページを読み込んだ後、ページ数を知る必要があるので、最初のページのrenderSuccessがドキュメント状態のページ数を取得するのを待っています。 私は自分のプロジェクトで少し忙しいので、これをデバッグする時間がありませんでした。 電子で実行しているためか、ローカルファイルをロードしているためかはわかりません。 とにかく、私がこれをデバッグする時間があるとき、私はあなたを最新の状態に保ちます。