react-print实现打印

2024-09-04

在react中实现打印功能

最近项目中,前端采用react+antd+dva的组合,已经完成了后头管理类系统产品的更新迭代工作. 今天有一个新需求,需要在后台管理系统中实现点击打印完成指定页面的打印功能. 之前也没接触过,只知道浏览器带有打印功能的实现,window.print(). 问题来了,在react中是没有dom节点的,不过我们也是可以转为dom节点的. 常规js文件打印:https://blog.csdn.net/u014267869/article/details/52539341 在react中,其实同样也是

怎样使用 css 的@media print控制打印

怎样使用 css 的@media print控制打印? <HTML> <HEAD> <TITLE> New Document </TITLE> </HEAD><BODY> <style media="print">//这表示是在打印时的样式 .noprint { display: none;font-size:19px;COLOR: blue; } </style><style med

PrintArea打印，@media screen解决移动web开发的多分辨率问题，@media print设置打印的样式

PrintArea打印,局部DIV打印插件,依赖JQuery. github:https://github.com/RitsC/PrintArea 当打印时需要临时改变页面布局,可以使用 @media print{ /* * CSS */ } 打印时生效,打印完自动失效. 需要屏幕自适应,或多种分辨率可以使用 @media screen and 一.判断媒体类型,引用不同的样式表 <link rel=”stylesheet” media=”screen and (判断条件)” herf=”需要调

文档打印 js print调用打印dom内容

1.首先按目前研究 print可以打印dom 2.被设置overflow:hidden 的模块,打印时会被截掉. 3.被设置成 display:none 的dom 打印不会有样式边框等. 4.如果需要改变打印样式则需要css3媒体查询,并确保样式被加载到输出的dom中: 例如: <style type="text/css">@media print {.showy>p{display:none;}.cls{display:none;}td {background-c

react + antd 实现打印功能（踩了不少坑）

最近在有网页打印需求,尝试了一下react的打印功能,遇到了不少的坑: 1.react本身有一些打印的组件,但都不好用,都是基于window.print(),但是window.print()如果直接打印的话,没有样式.处理直接当前网页的body设置为你要打印的区域,但是当你取消打印的时候你会发现整个网页都被你要打印的区域占满了,你还得用window.reload()重新加载一下页面,用户交互很不好,建议不要采用这种方式. 2.样式的问题,我们可以通过写内联样式解决,尝试了react的react-

react 如何引入打印控件 CLodop

下载插件,官网地址 http://www.lodop.net/download.html ,选择综合版,解压下载的文件.直接点击安装,很简单,就不一一说明了. 复制下面几个文件,到react项目中引入 LodopFuncs.js 和js中的 getLodop 方法 import { getLodop } from './print/LodopFuncs'; 这里有个小问题,如果直接引入LodopFuncs.js,会报错 react环境下找不到getLodop 和 CLODOP对象,需

控制window.print不打印某些内容

jquery.print.js 打印插件

window.print实现打印特定控件或内容

window.print打印指定div 首先我们可以把要打印的内容放在div中,然后用下面的代码进行打印. <html> <head> <script language="javascript"> function printdiv(printpage) { var headstr = "<html><head><title></title></head><body>&

window.print控制打印样式

我们可能会去使用window.print()方法来打印页面,但是当我们遇到需要改变打印时候的字体大小等css样式的时候你可能会懵逼. 所以搜索成了我们的必经之路,我相信在网上搜索出来的最好的答案就是使用js来新打开一个页面,设置其中的样式在去打印. 初略一看,这个方案还是可以接受的,最起码实现了功能,虽然很不优雅. 其实如果你熟悉@media 的话,你可能会忽略掉一个功能,那就是控制打印样式! @media print { selector { ... } } 这个规则会在我们调用window.

window.print()局部打印三种方式

首先准备要打印的内容,也可以打印时再填充,html中定义如下:  <div id="printcontent" style="display:none"> ${printContentBody} </div>  方法一: 通过开始.结束标记(startprint.endprint)来打印 function doPrint() { bdhtml=window

print多重打印

遇见有趣的问题必须记录下来,当时的想法思路也要记下来以下两行代码打印出来的结果会是什么 print('2 * 3 = %d' % (2 * 3)) print('2 * 3 = %d' % 2 * 3) 对于第一行代码,学过字符串格式化后,很容易就能看出来,打印结果为: 那么第二行呢,想了好一会儿实在是想不出来这行代码打印出来的结果是什么于是就打印了一下结果,感觉挺有趣的,第二行代码的打印结果是: 乍一看,这什么玩意儿,根本没有头绪,为什么打印出来的结果会是这样思维定势,受到了等号的影响,

print,cat打印格式及字符串引号格式，去掉字符串空格 in R

print 函数的打印格式: ##no quote print out > x <- letters[1:5] > print(x,quote=F,);print(x,quote=T) [1] a b c d e [1] "a" "b" "c" "d" "e" ##print without number of vector and quote > cat(x) a b c d e

vue 中使用print.js 打印遇到的问题？

不管怎么设置打印部分的 margin和height 仍会在预览时多出一张空白页?求各位大佬遇到过的请留言谢谢!

C++模拟python风格的print函数--打印vector,map,list等结构

// 最基本实现 template<typename T> static void print(T t) { std::cout << t; } // 处理 std::pair template<typename Kt, typename Vt> static void print(std::pair<Kt, Vt> kv) { print(kv.first); print(" = "); print(kv.second); } // 对

pycharm 使用print不打印结果问题解决

参考 http://blog.csdn.net/olfisher/article/details/52486368 参考2 http://www.imooc.com/qadetail/122734 问题:执行成功,但是不显示结果解决: 1.尝试新建文件,重新输入,无法解决 2.尝试DEBUG之后,再RUN,依旧无法显示 3.尝试选中文件名,右键,运行,显示结果,问题解决

print(dir(...)) 打印对象或者类中的方法和函数

window.print() 打印页面部分内容的方法

用 JavaScript 实现页面数据的打印 : 主要是用到了一个 print() 函数 , 该函数将会打印整个 web 页面 body 内的所有 html 数据 ! 使用方法为 window.print(); 打印页面上局部的数据,则可以用 //把数据嵌套在一个 div 里,获得 div var printData = document.getElementById("dvData").innerHTML; 获得 div 里的所有 html 数据 window.document.

用window.print()打印指定div里面的内容（转载的）

用window.print()打印指定div里面的内容今天客户让添加个打印证照功能,直接用window.print()打印的是整个页面,而用以下方法就可以只打印证明了  <html> <head> <script language="javasc

window.print打印指定div

window.print可以打印网页,但有时候我们只希望打印特定控件或内容,怎么办呢? 首先我们可以把要打印的内容放在div中,然后用下面的代码进行打印. <html> <head> <script language="javascript"> function printdiv(printpage) { var headstr = "<html><head><title></title&

react-print实现打印

热门专题