前端react后端springcloud,mybatis-plus 实现打印
第一前端传值
第二后端查询数据
第三后端铺表格
下面是要实现打印功能，
这个是要打印的图片：
这个是最后实现的样子：
前端实现一个打印按钮：
import { Breadcrumb, Button, Table } from 'antd'
import { ColumnsType } from 'antd/es/table'
import { Main } from 'common/components/Main'
import { isoDate } from 'common/utils'
import { naturalOrder } from 'comparing'
import { PrintClassuserMadal } from 'modules/trouble/workPermit/printClassuser' // 打印窗口
import { PRType, Relativeurl } from 'modules/trouble/workPermit/type' // 实体
import { GetServerSideProps } from 'next'
import Head from 'next/head'
import { Key, useEffect, useState } from 'react
import { useModal, useTableQuery } from '@asiic/hooks'
import { defaultPagination, getLayoutProps } from '@asiic/utils'
import styles from '../../modules/index.module.less'
import QueryForm from '../../modules/trouble/workPermit/QueryForm' // 查询
import type { NextPage } from 'next'
type UserProps = {
hello: string;
};
const Projectpersonnel: NextPage
const url = Relativeurl.PRECORD;
const [{ isFetching, data }, setQueryForm, setTableChange] = useTableQuery
const [selectedRowKeys, setSelectedRowKeys] = useState
const [modalPrit, openWithPrint, closePrint] = useModal
useEffect(() => {
setQueryForm({
level: 0
})
}, []);
const columns: ColumnsType
{
title: '序号',
align: 'center',
width: '50px',
render: (text, record, index) => `${index + 1}`,
},
{
title: '操作',
align: 'center',
dataIndex: 'option',
width: '250px',
render: (_, record) => [
key="print"
onClick={() => {
openWithPrint(record);
}} // 一个点击按钮
>
打印
,
key="print"
// onClick={() => {
// openWithPrint(record);
// }}
>
上传图片
],
},
{
title: '编号',
align: 'center',
width: '100px',
dataIndex: 'permitNo',
},
{
title: '工作内容',
align: 'center',
width: '200px',
dataIndex: 'workContent',
},
{
title: '作业地点',
align: 'center',
width: '100px',
dataIndex: 'workPlace',
},
{
title: '作业单位',
align: 'center',
width: '400px',
dataIndex: 'orgName',
},
{
title: '作业负责人',
align: 'center',
width: '100px',
dataIndex: 'manageUser',
},
{
title: '现场监管人(监管人员清)',
align: 'center',
width: '200px',
dataIndex: 'controlUser',
},
{
title: '作业开始时间',
align: 'center',
width: '200px',
dataIndex: 'startTime',
render(_, record) {
return isoDate(record.startTime);
},
sorter: (a, b) => naturalOrder(a.startTime, b.startTime),
},
{
title: '作业结束时间',
align: 'center',
width: '200px',
dataIndex: 'endTime',
render(_, record) {
return isoDate(record.endTime);
},
sorter: (a, b) => naturalOrder(a.endTime, b.endTime),
},
{
title: '级别',
align: 'center',
width: '100px',
dataIndex: 'level',
},
{
title: '作业人数',
align: 'center',
width: '100px',
dataIndex: 'workUserNum',
},
{
title: '特种作业人数',
align: 'center',
width: '100px',
dataIndex: 'specialUserNum',
},
{
title: '持证人数',
align: 'center',
width: '100px',
dataIndex: 'holderNum',
},
{
title: '作业人签字(操作人员清)',
align: 'center',
width: '200px',
dataIndex: 'busywork',
},
{
title: '作业许可证审批意见',
align: 'center',
width: '200px',
dataIndex: 'opinion',
},
{
title: '签发人',
align: 'center',
width: '100px',
dataIndex: 'signer',
},
{
title: '作业负责人签字',
align: 'center',
width: '150px',
dataIndex: 'workResponsibleName',
},
{
title: '作业负责人签字时间',
align: 'center',
width: '200px',
dataIndex: 'workResponsibleNameTime',
render(_, record) {
return isoDate(record.workResponsibleNameTime);
},
sorter: (a, b) => naturalOrder(a.workResponsibleNameTime, b.workResponsibleNameTime),
},
{
title: '现场监管人签字',
align: 'center',
width: '150px',
dataIndex: 'supervisionName',
},
{
title: '现场监管人签字时间',
align: 'center',
width: '200px',
dataIndex: 'supervisionNameTime',
render(_, record) {
return isoDate(record.supervisionNameTime);
},
sorter: (a, b) =&g