前言：主要原理是原生的window.print()，只是有人把它封为react组件了
优点： 支持仅打印某个react组件，打印出来的pdf质量、大小客观
缺点： 仅支持react，因为是原生的api，谷歌浏览器还好，其他浏览器不太可观，而且需要用户去点击保存，体验不好，要自己写@media print{} css样式
一。简单使用
1.将组件安装
npm install --save react-to-print
2.将需要的组件引入
import React from 'react'
import ReactToPrint from 'react-to-print';
import PrintToComponent from './PrintContent'
import pdfStyle from './print.less'
import { Button,message } from 'antd';
3.选择要打印的组件
render() {
return (
<div>
<ReactToPrint
trigger={() =>
<Button className={ pdfStyle.downBtn } type="primary">PDF</Button>}
content={() => this.componentRef}
/>
<PrintToComponent ref={el => (this.componentRef = el)} />
</div>
);
}
项目结构图
)
4.通用样式（根据需求在@media print添加【不过你的首先有类名哦！！！】）
@media print {
html, body {
height: inherit;
}
@page {
size: A4 portrait; //A4大小纵向
size: auto;
/*autoistheinitialvalue*/
margin: 0;
/*页面内容区域底部添加一条1px的灰线*/
@bottom-left {
border-top: 1px solid gray;
}
@bottom-center {
border-top: 1px solid gray;
}
@bottom-right {
border-top: 1px solid gray;
}
/*页脚中间显示格式如"第3页"的页码*/
@bottom-center {
content: "第"counter(page)"页";
}
table{
page-break-after: avoid;
}
}
h1 {
page-break-before: always;
}
h1,
h2,
h3,
h4,
h5,
h6,
thead,
tfoot,
tr,
th,
td,
li {
page-break-inside: avoid;
}
thead,
tfoot {
display: table-row-group;
}
.other-ele {
//打印时将不需要的元素隐藏
display: none;
}
.pdf-title {
//只在打印时候显示的元素
display: block;
}
.panel-sm {
//打印时候改变某些元素的样式
margin: 0;
border: 1px solid#bce8f1;
}
.btnColor {
background-color: red;
font-size: 28px;
color: pink;
}
.divColor {
color: red;
}
.btnColor {
display: none;
}
.ant-layout-sider {
display: none;
}
.ant-layout-header {
display: none;
}
.ant-layout-footer {
display: none;
}
.ant-table-body {
max-height: 100% !important;
}
a::after {
content: "("attr(href)")";
/*所有链接后显示链接地址*/
}
.break_after{
page-break-before: always;
}
}
.downBtn{
position: absolute;
z-index: 1;
right: 5%;
top: 11%;
}
5.关于类名的设置
（1）.className
import styles from './print.less' //引入你的样式
<div className={ styles.printContent } style={{ paddingTop: "10px" }}>//单个
<Row className={`${styles.showcase} ${styles.mingCheng}`}> //多个类名
二。文档
1.github代码仓库
2.参考： [在react中实现打印功能]
三。遇到的问题
1.echart图表打印时不能响应式不同屏幕的大小
原因：echart在渲染的时候，把百分比单位尺寸都转化为px单位了。
处理方式：在前端页面找对应控制元素的div，然后在打印样式里面设置一个类名往下找。
如：
（1）代码中设置对应的id或者class
代码中设置对应的id或者class
（2）找到对应影响echart的div
找到对应影响echart的div
（3）在打印样式中写样式
在打印样式中写样式
网友评论