react 前端 实现打印机打印功能

已于 2022-10-26 16:43:49 修改
阅读量3.6k 收藏 7
点赞数
分类专栏： React 文章标签： 前端
于 2022-09-16 13:44:02 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lijiamingyyds/article/details/126887968
版权
该博客介绍了如何在React应用中实现前端打印功能。首先，通过设置页面ID来获取打印内容，然后创建一个专门用于打印的组件，根据type选择需要打印的数据。文章详细展示了如何渲染表格数据，包括表头和内容，并提供了打印机方法的调用示例。最后，展示了包含WaterMark的打印页面代码，包括数据的处理和展示。
摘要由CSDN通过智能技术生成

首先在页面中引入打印的页面设置id 以便打印的时候获取到。

 我们的打印页面先创建一个这个文件 进行通过type选择需要打印的数据页面，其中的tableModal就是我们这次要打印的数据页面。在这个文件中已经引入进来了

 

这个方法主要是用来渲染行内容数据。对应了render下面的渲染部分

 

 

 这里是表头的定义之所以都这样写是因为可以写成多个打印表，然后通过column下面的参数进行选择表头，上面也是通过compobj进行选择表内容

最低0.47元/天 解锁文章
雾深处难见真颜
关注
  • 0
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
react打印
qq_40504777的博客
09-22 1765
由于业务需要打印业务，所以查询了一些资料，总结一下打印的一些方法。 1.调用window.print打印 window.print打印会调用当前页面，业务需求是打印当前页面的其中的几块区域，所以不是很符合业务要求，也不是没有处理方法（个人想法，未实践）。 调节不需要的模块进行隐藏，然后调用window.print打印，打印或取消结束时恢复原来的样式。个人认为该方法真不是一个好方法，首先会操作DOM，显然会导致消耗过大，没有必要；其次，如果样式过于复杂的情况下，其实控制...
react项目中实现打印预览功能
lzfengquan的博客
08-27 1732
最近项目中，前端采用react+antd+dva的组合， 今天有一个新需求， 需要在后台管理系统中实现 点击打印 完成指定页面的打印功能。 我们道浏览器带有打印功能的实现，window.print()。 然而，在react中是没有dom节点的，不过我们也是可以转为dom节点的。就是在需要打印的内容部分节点添加一个ID 　　只不过，这样打印出来的内容是没有带样式的，因为一般css文件并不会写到行内去，所以在生成html的文件字符串时，里面没有样式信息，在打印时就会布局混乱。 要想打印出来的效果与网页上
在react项目中，唤起打印功能，出现数据异步问题导致打印的数据是上一次的数据内容。
最新发布
yuanluyun9781的博客
07-12 145
在react项目中，唤起打印功能，出现数据异步问题导致打印的数据是上一次的数据内容。
React实现打印
qq_52845451的博客
12-21 1872
react打印
react实现打印功能
lzfengquan的博客
05-06 738
具体的查看文章鉴于 ： https://www.cnblogs.com/sk-3/p/9664496.html 。 在react中，其实同样也是可以获取到节点信息的，在你需要打印的内容部分节点添加一个ID 用一个div报扩你要打印的内容 打印的事件 print = () => { window.document.body.innerHTML = window.document.getElementById(‘billDetails’).innerHTML; window.print(); windo
React实现打印功能
weixin_33904756的博客
01-10 2023
一、需求分析： 环境：react，antd，antd-pro将选中的数据进行打印，可以自定义分页的大小。由于打印的列等多个因素，导致如果写成组件在使用的时候依旧会改变源码，所以采用了写成页面的方式， 二、实现需求： 1、数据传值 进行传值的时候，刚开始使用的是在通过this.props.location进行传值，但是这样数据被写死了，导致...
前端项目实战125-react实现网页打印
qq_41632427的博客
10-23 336
前端
react控制打印机打印_React实现打印功能
weixin_42321496的博客
12-24 3024
一、需求分析：环境：react，antd，antd-pro将选中的数据进行打印，可以自定义分页的大小。由于打印的列等多个因素，导致如果写成组件在使用的时候依旧会改变源码，所以采用了写成页面的方式，二、实现需求：1、数据传值进行传值的时候，刚开始使用的是在通过this.props.location进行传值，但是这样数据被写死了，导致再次进入页面的时候无法更新打印的值。最后采用了一个全局的model进...
react控制打印机打印_React如何实现浏览器打印部分内容详析
weixin_39803207的博客
12-24 564
前言近期着手项目任务的打印功能，在此作个记录，本文介绍基于React的一种调用浏览器打印页面指定内容的方法。整体思路： 通过构建一个隐藏的元素(该元素包裹需打印的内容)，当打印行为触发时，将页面其他的一些不需要打印的元素隐藏，然后将需打印的元素追加到body中，打印完成后，再恢复初始状态即可。浏览器打印的本质还是将web页面中的元素打印出来而已。1. 构建待打印元素在页面中构建一个display为...
react 前端实现打印发票/图片
欢迎光临本仓鼠的地盘～
03-01 1918
项目场景： 电商后台管理系统，有一个功能要在web端生成发票、发货单（图片），并支持打印。客户是澳洲人，只考虑Chrome即可。 解决方案： 由于原型中发票的样式有一丢丢复杂，所以我们采用后端提供数据，前端编排打印模板的方案来实现。前端采用浏览器默认的打印方法window.print() // 点击打印按钮 handlePrint = async () => { const { data } = await printtaxinvoice({ id:this.props.
React如何实现浏览器打印部分内容详析
10-16
主要给大家介绍了关于利用React如何实现浏览器打印部分内容的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用React具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
react-easy-print:强大的React组件，易于打印
05-02
React轻松打印 :package: 0.6.0捆绑包大小减小0.6.0 ，并声明了问题解决方案，并发布了TS定义！ 高浏览器兼容性 。 另参阅： : 小尺寸 关于压缩的3KiB 没有依赖关系 我们仅使用一个微小的构建时依赖性将样式注入头部 用法 在查找 。 示例1 ：具有单个可打印组件的页面，没有其他任何内容 import PrintProvider , { Print , NoPrint } from 'react-easy-print' ; ... < PrintProvider> < NoPrint> < Router> // < Layout> // invisible in the print mode ... //
前端react后端springcloud,mybatis-plus 实现打印
m0_72154126的博客
10-15 228
实现打印功能
react怎么连接打印机_React Native Socket 连接打印机推送指令
weixin_33252145的博客
12-24 600
序公司因为业务需要，开发安卓扫描枪打印快递单之类的，踩了一天的坑，终于在队友帮助下搞定原理很简单，利用打印机的socket通信话不多说，直接撸代码因为js不支持Socket通信，所以需要自己编写原生去实现@ReactMethodpublic void print(String ip,Integer port, String msg, Promise promise) {try{Socket soc...
实现React模板打印
Li_na_na01的博客
08-17 2231
react项目通过iframe实现模板打印功能。
react后台项目的打印功能的实现
weixin_52485116的博客
09-23 1395
2.调用window.print()的方法进行打印,比较方便也不用使用插件.原理是利用操作dom的方法来实现将打印的内容显现其他内容销毁,取消后可以刷新并还原以前的内容.1.使用react的插件react-print,配合ref实现浏览器部分内容打印.因为我写的二期的后台项目,创建的文件命名的问题不太好用这个插件,就使用了第二方法.1.浏览器调用打印方法,浏览器默认是一页,没有办法实现打印分页的效果,可以根据css样式的添加给打印内容的高设置为100%,或者是通过媒介判断打印状态实现自动分页.
react,js,前端打印功能
weixin_69903461的博客
12-22 503
注意命名和第一步中数据处理的templateName一致。第四步：在static静态文件下写一个html模板。第一步：数据处理，处理成类似打印7里的数据格式。第二步：写一个辅助函数如id3。结束，希望对你有所帮助。
前端调用打印机
Superoir的博客
01-02 666
前端调用打印机
react 前台 调用打印机 打印pdf流
05-05
要在 React 前端调用打印机打印 PDF 流，你可以使用 `react-to-print` 库来实现。 首先，你需要在 React 组件中引入 `react-to-print` 库： ```javascript import ReactToPrint from "react-to-print"; ``` 然后...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值