admin管理员组文章数量:1648928
目录
- 导入react-pdf
- 在文件中引入并使用
- 下拉展示
导入react-pdf
npm i react-pdf -S
或
yarn add react-pdf
在文件中引入并使用
- 从
react-pdf
引入会有不知名错误,react-pdf/dist/esm/entry.webpack
并没有。- onLoadSuccess可以获取对应加载pdf的总页数,此处用函数onDocumentLoadSuccess保存为
numPages
。- Page设置属性
pageNumber
就是对应的pdf页数,参数基于1,这里展示第一页,可以通过添加按钮修改pageNumber的值达到切换pdf页面的效果。- Document的
file
就是访问pdf路径,如果是本地路径也许不会有跨域问题,如果是在线pdf,开发时建议加上前缀进行proxy代理,项目上线后同样用nginx做一样的代理即可。此处代理/pdf/
,将/pdf/
后面请求的pdf文件转发去在线文件所在地址。
import React, { Component } from 'react';
import { Document, Page } from 'react-pdf/dist/esm/entry.webpack';
export default class index extends Component {
state = {
numPages: null,
pageNumber: 1,
};
onDocumentLoadSuccess = ({ numPages }) => {
this.setState({ numPages });
};
render() {
const { pageNumber } = this.state;
return (
<div>
<Document
file={'/pdf/555.pdf'}
onLoadSuccess={this.onDocumentLoadSuccess}
>
<Page width={window.screen.width} pageNumber={pageNumber} />
</Document>
<button
onClick={() => {
pageNumber > 1
? this.setState({ pageNumber: pageNumber - 1 })
: alert('前面没有了');
}}
>
上一页
</button>
<button
onClick={() => {
pageNumber < numPages
? this.setState({ pageNumber: pageNumber + 1 })
: alert('后面没有了');
}}
>
下一页
</button>
</div>
);
}
}
代理代码示例:
proxy:{
'/pdf/': {
target: 'http://xxxxxxxxx:xxxx/',
changeOrigin: true,
pathRewrite: { '^/pdf/': '' },
},
}
下拉展示
- 其实就是一口气遍历渲染出来,创建了一个长度为总页数numPages的数组进行map,用index做页数的请求,不过
index基于0,pageNumber基于1
,因此index需要+1。- 示例比较粗糙,一口气展示,展示较少内容的pdf时没有什么问题,如果pdf页数过多会出现
性能问题
,可以自行考虑加载方法(例如每滑动十页进行下面十页的加载)。
import React, { Component } from 'react';
import { Document, Page } from 'react-pdf/dist/esm/entry.webpack';
export default class index extends Component {
state = {
numPages: null,
pageNumber: 1,
};
onDocumentLoadSuccess = ({ numPages }) => {
this.setState({ numPages });
};
render() {
const { pageNumber, numPages } = this.state;
return (
<div>
<Document
file={'/pdf/555.pdf'}
onLoadSuccess={this.onDocumentLoadSuccess}
>
{new Array(numPages).fill('').map((cur, index) => (
<Page
key={index}
width={window.screen.width}
pageNumber={index + 1}
/>
))}
</Document>
</div>
);
}
}
版权声明:本文标题:react react-pdf实现在线pdf加载(翻页加载、下拉滚动加载) 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://www.elefans.com/dianzi/1729504998a1203524.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论