react调用打印功能

使用jQuery浏览插件可以很方便的进行局部打印,常用的插件有:

1)jquery.print.js 下载地址:https://github.com/DoersGuild/jQuery.print

2)jquery.print-preview.js 下载地址:https://github.com/etimbo/jquery-print-preview-plugin

官网上都有demo可以参考,本次介绍的是另外的一种方式。

使用print.js打印。

安装

1.使用npm安装:

npm install print-js --save

使用yarn安装:

yarn add print-js

引入:

import printJS from 'print-js'

使用

print-js支持的打印格式有四种,pdf,html,json,image。下面简单介绍一下。

1.打印图片

imageUrl为图片的地址,支持放入多个图片,数组的形式;

printJS({printable: [`${imageUrl}`], type: 'image', imageStyle: 'width:80%'});

2.打印pdf

默认的为pdf,所以可以直接打印,不许指定类型;

printJS('/test/manual/test.pdf');

3.打印html:

printable的值为需要打印标签的id。

printJS({

    printable: 'test',

   type: 'html'

});

4.可以打印数据,通过json的格式,可以设置样式。

 

更详细的内容可以查看:https://github.com/crabbly/Print.js.

该地址提供的说明也不是特别详细,有兴趣小伙伴或者有特殊需求的小伙伴可以查看一下源码,比较简单。

 

  • 4
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
要实现 React打印功能,可以使用浏览器提供的 window.print() 方法。具体实现步骤如下: 1. 在需要打印的页面组件中,添加一个按钮或者其他触发打印的元素。 2. 给该元素绑定一个点击事件,事件处理函数中调用 window.print() 方法。 3. 在 CSS 样式表中,针对需要打印的内容,设置 media="print" 的样式。 举个例子,假设有一个名为 PrintButton 的组件,用于触发打印操作,代码如下: ``` import React from 'react'; class PrintButton extends React.Component { handleClick = () => { window.print(); } render() { return ( <button onClick={this.handleClick}>打印</button> ); } } export default PrintButton; ``` 在需要打印的页面组件中,引入该组件,并在需要打印的内容上设置 media="print" 的样式,如下所示: ``` import React from 'react'; import PrintButton from './PrintButton'; class PrintPage extends React.Component { render() { return ( <div> <h1>需要打印的内容</h1> <p>这是一段需要打印的文本。</p> <PrintButton /> <style media="print"> /* 打印时的样式 */ body { font-size: 14px; color: #000; } </style> </div> ); } } export default PrintPage; ``` 这样,在点击打印按钮时,就会弹出浏览器的打印对话框,用户可以选择打印机、纸张大小等设置,然后点击打印即可。同时,由于设置了 media="print" 的样式,打印出的内容也会按照该样式进行排版和显示。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值