reactpdf预览
查看react-pdf安装包发现react-pdf也是引⽤了pdf.js，使⽤react-pdf的写法传⽂件的base64编码可以正常显⽰出来。
⾃⼰调⼀下样式，分页使⽤ant-design的分页组件，显⽰效果如下：
后台返回的pdf⽂件数据：
后台返回的是⽂件流⼆进制数据，预览是新开的窗⼝，关键代码
stream.blob().then(blob => {//stream 后台返回的数据
const r = new FileReader(); // 读取file对象，提取图⽚base64编码，⽤于预览
const eurl = sult;
const myWindow = window.open('/preview', '_blank');// 新开窗⼝跳转到preview.js
});
预览页⾯的代码：preview.js
import React, { Component, Fragment } from 'react';
import { Document, Page } from 'react-pdf';
import { Pagination } from 'antd'
import styles from './Preview.less'
class Preview extends Component{
state={
pdfBase64:null,
numPages:0,
pageNumber:1
}
componentDidMount(){
window.addEventListener('message', (event) => {
this.setState({pdfBase64:event.data})
}, false)
}
onDocumentLoad = ({ numPages }) => {
this.setState({ numPages });
}
onChangePage=(page)=>{
this.setState({ pageNumber:page });
}
render(){
const {pdfBase64,numPages,pageNumber} = this.state
return(
<Fragment>
<Document
className={styles.preview}svg canvas
onLoadSuccess={DocumentLoad}
file={pdfBase64}
renderMode='svg'
>
<Page className={styles.page} pageNumber={pageNumber} scale={1.5} />        </Document>
<Pagination
className={styles.pagination}
total={numPages}
showTotal={total => `共 ${total} 页`}
current={pageNumber}
pageSize={1}
size='small'
onChange={ChangePage}
/>
</Fragment>
)
}
}
export default Preview
出现⼀些问题。。。。
有些⽂档字体出现很怪异的现象：
后来发现把⽤svg渲染改成canvas就可以了。
<Document
className={styles.preview}
onLoadSuccess={DocumentLoad}
file={pdfBase64}
renderMode='canvas'
>
<Page className={styles.page} pageNumber={pageNumber} scale={scale} />          </Document>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。