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

Question

问题描述

已经能够预览出来了，但是打印的时候出了一些问题。

相关代码

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>
    )
  }
}

打印预览结果如图示：

浏览器整页打印：

指定区域打印（pdf部分）：

Answer 1

请问你解决了吗？是怎么解决的？为什么我一点打印都是空白