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 (

预览PDF文件

title="PDF测试打印"

visible={this.state.visible}

onOk={this.hideModal}

onCancel={this.hideModal}

okText="确认"

cancelText="取消"

centered

width='643px'

>

第{page}页/

共{pages}页

打印

)

}

}

打印预览结果如图示：

浏览器整页打印：

指定区域打印(pdf部分)：