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

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

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

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

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

这里我们进行渲染表头数据暴露参数都是data

这里调用打印机方法

写在需要打印的组件中的点击事件

接下来是打印机页面的代码

import React, { Component } from 'react';

import moment from 'moment';

import { WaterMark } from '@ant-design/pro-layout';

import { connect } from 'umi';

import RegFentoYuan from '@/utils/regFentoYuan';

class DrugS extends Component {

constructor(props) {

super(props);

this.state = {

datelist: {},

num: 0,

};

}

compRender = (item, index) => {

let comp = null;

const { data } = this.props;

console.log(data, 'tongji');

let compObj = {

// 药品配发领药

DrugS: (

<td style={{ border: '1px solid #ccc' }}> {index + 1}</td>

<td style={{ border: '1px solid #ccc' }}> {item?.drugsName}</td>

<td style={{ border: '1px solid #ccc' }}>{item?.packSku}</td>

{RegFentoYuan('FenToYuan', Number(item?.totalPrice))}

</td>

</tr>

};

comp = compObj[this.props?.data?.type];

return comp;

};

render() {

const { data = {} } = this.props;

const {

user: { columnName = {} },

} = this.props;

let column = {

DrugS: [

'序号',

'药品名称',

'普通规格',

'包转规格',

'数量',

'单位',

'总计金额',

};

let userInfo = JSON.parse(localStorage.getItem('userInfo'));

console.log(userInfo);

return (

<div>

<WaterMark

content="新疆自治区医疗及资产管理平台"

style={{

height: '100%',

width: '100%',

webkitPrintColorAdjust: 'exact',

mozPrintColorAdjust: 'exact',

msPrintColorAdjust: 'exact',

}}

<h1

style={{

fontSize: '20px',

textAlign: 'center',

fontWeight: 'bolder',

}}

{data?.title || '表'}

</h1>

{/* 民警端执行医嘱才会展示单位 */}

统计时间：{userInfo?.sysAreaFullName}

</span>

来源：{moment().format('yyyy-MM-DD HH:mm:ss')}

</span>

</div>

<table

style={{

border: '1px solid #ccc',

width: '100%',

borderCollapse: 'collapse',

color: '#333333',

textAlign: 'center',

}}

<tr>

{column[data?.type]?.map(item => {

return <th style={{ border: '1px solid #ccc' }}>{item}</th>;

})}

</tr>

{data?.data?.map((item, index) => this.compRender(item, index))}

</table>

</WaterMark>

</div>

);

}

export default connect(({ basic, user }) => ({ basic, user }))(DrugS);

react 前端实现打印机打印功能相关推荐

MFC 实现打印机打印功能
Visual C++6.0是开发Windows应用程序的强大工具,但是要通过它实现程序的打印功能,一直是初学者的一个难点,经常有朋友询问如何在VC中实现打印功能,他们往往感到在MFC提供的框架内实现这 ...
react+antd+react-to-print实现打印功能,ie浏览器可去掉滚动条
import styles from './xx.module.css'; import ReactToPrint from 'react-to-print'; import ...略export c ...
vue 使用浏览器自带打印机打印功能
本文主要介绍了vue项目中使用print.js打印,解决多页,分页,打印预览样式修改等问题. 引入安装vue-print.js cnpm i vue-printjs --save-dev 解决打印多页 ...
关于前端页面连接打印机打印
关于前端连接打印机打印页面代码逻辑代码需要引入JQ 页面代码 <div class="print-Box" ><div id="test" ...
在react框架中实现打印过程中踩的坑
最近在做一个需求,就是需要在产品里调用打印机,实现打印票据的操作,我也是第一次做,说真的踩坑不少,希望这篇文章可以帮助到你. 文章目录前言 window.print()踩的坑第三方库react-t ...
PrintService关于PDF的生成以及打印机打印
之前通过网上查询java实现打印机打印功能的方法大部分都是通过SimpleDoc类构件打印机的打印文件属性,通过PrintJob的Print()实现打印,但是打印出来的都是乱码. 首先考虑能不能打印文 ...
itext通过pdf模板填充数据并调用打印机打印
使用itext5对生成的pdf模板进行编辑填充数据,一种是通过绝对定位去做,简单的可以,通用性太差,第二种是通过pdf域来填充字段,通用性很强在使用过程中遇到的问题: 网上都是通过这种字体设置中文的 ...
react项目中实现打印预览功能
最近项目中,前端采用react+antd+dva的组合, 今天有一个新需求, 需要在后台管理系统中实现点击打印完成指定页面的打印功能. 我们道浏览器带有打印功能的实现,window.print() ...
VUE整合VUE-PRINT-NB实现前端打印功能
VUE整合VUE-PRINT-NB实现前端打印功能插件安装 npm install vue-print-nb --save 插件安装时最好在package.json中同时加入依赖信息,便于项目上其他 ...

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

react 前端实现打印机打印功能相关推荐

最新文章

热门文章

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

react 前端 实现打印机打印功能相关推荐

最新文章

热门文章

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

react 前端实现打印机打印功能相关推荐