react+antd+react-to-print实现打印功能,ie浏览器可去掉滚动条

import styles from './xx.module.css';
import ReactToPrint from 'react-to-print';
import ...略export const aa = () => {,,, 略const getIeScrollClass = () => ieVersion >= 11 && !printBtnShow ? styles.scrollbar : ''return (<div style={{ pageBreakAfter: 'always' }} className={classnames(isPrint ? styles.a : styles.b, getIeScrollClass(), styles[其他classname])}ref={ref => setMyRef(ref)}><div style={{ visibility: printBtnShow ? undefined : 'hidden' }}><ReactToPrinttrigger={() => <a href="#">打印</a>}content={() => myRef}onBeforeGetContent={() => {// 打印前隐藏打印按钮setPrintBtnShow(false);}}onAfterPrint={() => {setPrintBtnShow(true);}}/></div><div>...打印内容...</div></div>
)
}

// 注意事项:
ie11浏览器的分页打印会出现滚动条, 记得把xx.module.css中的css样式改为
.scrollbar {
-ms-overflow: scroll;
-ms-overflow-style: none;
}

react+antd+react-to-print实现打印功能,ie浏览器可去掉滚动条相关推荐

js使用window.print()实现打印功能
js使用window.print()来实现打印功能 1.首先在需要打印的内容标签上面绑定ref <div ref="tableRef">需要打印的内容 </div ...
react+antd+vite配置一键换肤功能（步骤详细）
一.首先需要下载less.less-loader,然后在vite.config.js中配置如下二.再全局引入node_modules中的less文件三.引入antd中全局化配置组件,详细配置请参考 ...
vue项目实现前端打印功能
一.直接使用window自带的打印功能: window.print() <template><div><p>点击下面的按钮,可将div里的内容区域进行打印</ ...
React antd Table 实现单元格点击表头斜线分组等功能
先上成品示意图: 几个关键步骤: 一定义数据结构: export const data = [{key: 'row1',beforeUpdateLevel: '等级1',level_1: '保',l ...
typescript+react+antd基础环境搭建
typescript+react+antd基础环境搭建(包含样式定制) tsconfig.json 配置 // 具体配置可以看上面的链接这里module moduleResolution的配置都会影 ...
react antd confirm content list_react简单的项目架构搭建过程
前言 react官方推荐的脚手架create-react-app因为想给用户的最大自由度所以并没有像vue的脚手架那样生成的项目架构那么齐全,用这个写写demo还行,但是真正用在项目上还是不太合适的. ...
在react里写原生js_从零开始使用react+antd搭建项目
之前的文章都是自己的学习日志,主要是防止自己遗忘之前遇到的坑.这次将从最基础的项目搭建开始讲起,做一个基于react和antd的后台管理系统.我会一步步进行下去,所以看完本文你哪怕不了解react,应 ...
React+Antd+TypeScript 开发规范
React+Antd+TypeScript 规范整合 1.TypeScript代码标准化规则提取出部分适用于项目中的官方要求的的TypeScript用于约束贡献者的编码规范 [typescript官 ...
antd的联级选择器异步调用编辑回显_react-uplod-img 是一个基于 React antd组件的图片上传组件...
react-uplod-img 是一个基于 React antd组件的图片上传组件支持oss qiniu等服务端自定义获取签名,批量上传, 预览, 删除, 图片精确的尺寸限制排序等功能需要 re ...

react+antd+react-to-print实现打印功能,ie浏览器可去掉滚动条

react+antd+react-to-print实现打印功能,ie浏览器可去掉滚动条相关推荐

最新文章

热门文章