antd 实现pdf 预览_使用react-pdf-js插件实现pdf文件预览（canvas）及打印，指定区域打印时出现空白怎么弄？...

import React, { Component } from 'react';

import {Button, Modal, Pagination} from 'antd'

import PDF from 'react-pdf-js';

import test from '../../assets/files/test.pdf';

export default class index extends Component {

state = {

page: 1,

pages: 5,

visible: false,

}

onDocumentComplete = (pages) => {

this.setState({ page: 1, pages });

}

handlePageChange = (page) => {

this.setState({page});

}

showModal = () => {

this.setState({

visible: true,

});

}

hideModal = () => {

this.setState({

visible: false,

});

}

handlePrint = (id) => {

// console.log( document.getElementById(id).innerHTML)

document.body.innerHTML = document.getElementById(id).innerHTML;

window.print();

window.location.reload();

}

render() {

const { page, pages } = this.state;

return (

<div>

<Button type='primary' onClick={this.showModal}>预览PDF文件</Button>

<Modal

title="PDF测试打印"

visible={this.state.visible}

onOk={this.hideModal}

onCancel={this.hideModal}

okText="确认"

cancelText="取消"

centered

width='643px'

>

<div id='pdfPrint'>

<PDF file={test} onDocumentComplete={this.onDocumentComplete} page={page} />

<Pagination defaultCurrent={page} total={pages} pageSize={1} onChange={this.handlePageChange} />

<div style={{textAlign: 'center'}}>

<span>第{page}页</span>/

<span>共{pages}页</span>

</div>

</div>

<Button type='ghost' onClick={this.handlePrint.bind(this,'pdfPrint')}>打印</Button>

</Modal>

</div>

)

}

}