在react中实现打印功能

更新日期: 2019-10-11阅读: 2.9k标签: 功能

我们知道,window.print()可以调起打印功能,但是直接用window.print()如果直接打印的话,没有样式,而且默认打印的是整个网页的内容。解决的方法可以用iframe方式引入需要打印的区域,并把样式添加进去,然后把iframe标签定位到看不到的地方去。搜了一下,已经有人造好了轮子,react-to-print插件就是这么做的。


一.使用方法

下载 

npm install --save react-to-print

引用 

import ReactToPrint from 'react-to-print';

调用

 //触发按钮
 <ReactToPrint
          trigger={() => <a href="#">点此打印</a>}
          content={() => this.componentRef}
        />
  //打印内容
  <div ref={el => (this.componentRef = el)}>
            ....内容
  <div/>


二.组件参数

<ReactToPrint />

该组件接受以下参数(注意:?表示可选参数):

名称类型描述
triggerfunction返回React组件或html元素的函数
contentfunction返回组件参考值的函数。然后将该参考值的内容用于打印
copyStylesboolean?将所有<style>和<link type="stylesheet" />标签从<head>父窗口内部复制到打印窗口。(默认值:true)
onBeforeGetContentfunction?在库收集页面内容之前触发的回调函数。返回void或Promise。可用于在打印之前更改页面上的内容。
onBeforePrintfunction?打印前触发的回调功能。返回void或Promise。注意:此功能在打印之前立即运行,但在收集页面内容之后才运行。要在打印之前修改内容,请onBeforeGetContent改用。
onAfterPrintfunction?打印后触发的回调功能
onPrintErrorfunction(errorLocation: string, error: Error)?如果打印错误严重到无法继续打印,将调用的回调函数。目前仅限于onBeforeGetContent或中的Promise拒绝onBeforePrint。使用它尝试再次打印。errorLocation会告诉您Promise在哪个回调中被拒绝。
removeAfterPrintboolean?执行操作后,卸下打印iframe。默认为false。
pageStylestring?覆盖默认的打印窗口样式
bodyClassstring?传递给打印窗口主体的类

链接: https://fly63.com/article/detial/5918

vue实现打印功能的两种方法

通过npm 安装插件,安装 npm install vue-print-nb --save.如需通过链接地址打印:window.location.href = airway_bill; airway_bill为链接地址。如果内容打印不全,在打印操作时点击更多设置,然后设置缩放。

js简体繁体转换

繁体词库封装好的,直接就对应简体转换了, 本js用于客户在网站页面选择繁体中文或简体中文显示,默认是正常显示,即简繁体同时显示,本程序只在UTF8编码下测试过,不保证其他编码有效

js剪切板_Clipboard.js 使用

clipboard.js是一个用来设置剪切板的库,小巧无依赖,但用法有点诡异,必须依赖一个DOM元素,并且需要用户的点击操作才能实现功能

使用 css/less 动态更换主题色(换肤功能)

说起换肤功能,前端应该是非常熟悉了?一般来说换肤的需求分为几种:1. 纯前端,直接在页面前端通过点击自由切换限定的几种主题色,切换之后主题色变量存到本地浏览器

JS将货币小写转换为大写

JS将货币小写转换为大写,/** 数字金额大写转换(可以处理整数,小数,负数) */ [零, 壹,贰,叁,肆,伍,陆,柒,捌,玖]

如何较为优雅地实现新手引导功能?

早期的项目中晓衡遇到游戏终于要完成了,辛苦了一阵满以为可以稍微放松一下了,但策划、运营要求,增加一个他们认为非常“简单”且重要的功能: 新手引导 。

7个好用的TypeScript 新功能

在下面的例子中,要访问 address ,你必须遍历 data.customer.address,而且 data 或 customer 有可能是 undefined,所以通常使用 && 运算符或类似例子中的技巧遍历检查每个层次的定义。

javascript如何实现计时功能?

JavaScript中可以使用setInterval()方法实现计时功能,setInterval()方法可按照指定的周期(以毫秒计)来调用函数或计算表达式。

5个CSS新功能

在浏览器开始实现它们之前,CSS 新的功能通常需要经过长时间讨论之后,才在W3联盟的规范中定义。 有许多值得一提的 CSS 新功能,但是在本文中,我们重点介绍可以浏览器的稳定版中进行测试的五个功能:

Vue实现随机验证码功能

步骤1 创建一个名为identify.vue的子组件,步骤2 在子组件中进行注册和引用 ,步骤3 在主页面中使用子组件

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!