简介:在react的antd-pro的框架下展示本地的PDF文件
效果图:
一、插件选取。
听说过大名鼎鼎的PDF.js,但是因为是在react框架下,所以选取了两个可行的插件
两个插件都是对PDF进行的封装。两个插件都进行了尝试,相对而言react-pdf功能更强大并且文档也比较清晰,但是使用也会相对复杂一点。最后使用的是react-pdf-js这个插件。
二、展示选择的文件。
react-pdf-js
第一步:展示一个本地文档。
按照官方的文档:
render() {
let pagination = null;
if (this.state.pages) {
pagination = this.renderPagination(this.state.page, this.state.pages);
}
return (
file="test.pdf"
onDocumentComplete={this.onDocumentComplete}
page={this.state.page}
/>
{pagination}
)
}
注意:官方文档没有任何说明。此处的file是一个require过来的文件。
例子:要加载一个'E:\1.pdf',那么应该那么配置:
const PDFTest = require('E:\\1.pdf');
render() {
let pagination = null;
if (this.state.pages) {
pagination = this.renderPagination(this.state.page, this.state.pages);
}
return (
file={PDFTest}