页面证件打印

<template>
    <a-modal title=""
             :width="1000"
             v-model="visible"
             :maskClosable="false"
             :closable="false"
             okText="返回">

        <div v-for="(item,index) of printDoubleData"
             :key="index"
             :id="'content'+ index"
             class="contentt">
            <!-- <div class="prinLeft">
                <div class="leftContent">
                    <div class="leftContentLeft">应急管理部政治部监制</div>
                    <div class="leftContentRight">
                        <div></div>
                        <div class="contRightB">政府专职消防员证</div>
                        <div class="contRightC">中华人民共和国应急管理部</div>
                    </div>
                </div>
            </div> -->
            <div class="prinRight">
                <div class="rightNumLeft">
                    <div class="photoDiv">
                        <img class="photo"
                             :src="item.certificatePhoto"
                             alt="">
                    </div>
                    <div style="margin-left:15.83px">
                        <div class="rightTitle">
                            <span>编</span><span style="margin-left:30px;">号</span><span>粤政消</span> <span style="margin:0 8px;">字第</span><span>{{item.certificateNumber}}</span> <span style="margin-left:3px;">号</span>
                        </div>
                        <div class="rightTitle">
                            <span>发证机关</span><span style="margin-left:15px">广东省消防救援总队</span>
                        </div>
                        <div class="rightTitle">
                            <span>发证日期</span><span style="margin:0 10px;">{{item.BeginYear}}</span>年<span style="margin:0 10px;">{{item.BeginMonth}}</span>月<span style="margin:0 10px;">{{item.BeginDo}}</span>日
                        </div>
                        <div class="rightTitles">
                            <span>有效期至</span><span style="margin:0 10px;">{{item.EndYear}}</span>年<span style="margin:0 10px;">{{item.EndMonth}}</span>月<span style="margin:0 10px;">{{item.EndDo}}</span>日
                        </div>
                    </div>
                </div>
                <div class="rightTabRight">
                    <table border="1"
                           style="width:223px;height:318px;margin:0 auto">
                        <tr align="center">
                            <th colspan="1"
                                style="height:14.29%;width: 40px;">姓<br />名</th>
                            <td colspan="7"
                                style="height:14.29%;">{{item.certificateName}}</td>
                        </tr>
                        <tr align="center">
                            <th colspan="1"
                                style="height:14.29%;width: 40px;">出生<br />年月</th>
                            <td colspan="3"
                                style="height:14.29%;">{{item.birthDate}}</td>
                            <th colspan="1"
                                style="height:14.29%;width:25px">性<br />别</th>
                            <td colspan="2"
                                style="height:14.29%;">{{item.sex==1?'女':'男'}}</td>
                        </tr>
                        <tr align="center">
                            <th colspan="1"
                                style="height:14.29%;width: 40px;">籍<br />贯</th>
                            <td colspan="7"
                                style="height:14.29%;">{{item.nativePlace}}</td>
                        </tr>
                        <tr align="center">
                            <th colspan="1"
                                style="height:14.29%;width: 40px;">民<br />族</th>
                            <td colspan="7"
                                style="height:14.29%;">{{item.ethnic}}</td>
                        </tr>
                        <tr align="center">
                            <th colspan="1"
                                style="height:14.29%;width: 40px;">身份<br />证号</th>
                            <td colspan="7"
                                style="height:14.29%;">{{item.identityCardNumber}}</td>
                        </tr>
                        <tr align="center">
                            <th colspan="1"
                                style="height:14.29%;width: 40px;">单<br />位</th>
                            <td colspan="7"
                                style="height:14.29%;">{{item.deptName}}</td>
                        </tr>
                        <tr align="center">
                            <th colspan="1"
                                style="height:14.29%;width: 40px;">职<br />务</th>
                            <td colspan="7"
                                style="height:14.29%;">{{item.personnelType==1?'消防文员':item.personnelType==2?'消防文员':'企业专职'}}</td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
        <div slot="footer"
             style="text-align:center">
            <a-button style="background-color:#fafafa"
                      @click="back">
                返回
            </a-button>
            <a-button type="primary"
                      @click="handlePrint">
                打印
            </a-button>
        </div>
    </a-modal>

</template>
<script>
const styleSheet = `<style>
.content {width: 522px;height: 385px;}
.prinRight {width: 519.7px;height: 384.2px;display: flex;justify-content: space-between;align-items: center;position: relative;font-family: STFangsong;}
.rightNumLeft {width: 50%;height: 100%;margin-left:12.5px;display: flex;flex-direction: column;justify-content: center;}
.photoDiv {width: 94.15px;height: 131.81px;text-align: center;margin-left:96px;margin-bottom: 12.5px;}
.photo {width: 100%;height: 100%;}
.rightTitle {margin: 14.5px 0;width: 100%;text-align: left;font-size: 15px;font-family: STFangsong;}
.rightTitles {margin: 0 0;width: 100%;text-align: left;font-size: 15px;font-family: STFangsong;}
.rightTabRight {width: 50%;height:100%;display: flex;align-items: center;}
th,td {margin: 0;padding: 0;}table {*border-style: solid;*border-color: #333;*border-width: 1px 0 0 1px;font-size: 13px;border-collapse: collapse;}
table td,table th {font-family: STFangsong;border-width: 1px;*border-width: 0 1px 1px 0;border-style: solid;border-color: #333;box-sizing: border-box;text-justify: inter-ideograph;}
table th {text-align: center;}
table td {color: #000;font-weight: bold;font-size: 17px;}
.border0 {padding: 0;*border-width: 0;}
.border0 table {margin-left: -1px;border-style: hidden;*border-style: solid;border-width: 0;}</style>`
// 公共配置
import COMMON from '@/utils/mixins/common' // 混入公共组件配置
import cloneDeep from 'lodash.clonedeep'
import moment from 'moment'
import { getAllTreeList } from '@/api/common'
import { getSelectOneDetails } from '@/api/smartManagement/smart-data-standing-book/smart-station-important-diary'

import config from '../config'
export default {
    mixins: [COMMON],
    data() {
        return {
            treeFilter: [],
            ...config,
            visible: false,
            printDoubleData: [],
            form: {}
        }
    },
    created() {
        // this.loadDeptList()
    },
    methods: {
        moment,
        handlePrint() {
            //打印
            var newWin = window.open('') //新打开一个空窗口
            this.printDoubleData.map((item, i) => {
                var imageToPrint = document.getElementById('content' + i) //获取需要打印的内容
                newWin.document.write(imageToPrint.outerHTML) //将需要打印的内容添加进新的窗口
            })
            newWin.document.head.innerHTML = styleSheet //给打印的内容加上样式
            newWin.document.close() //在IE浏览器中使用必须添加这一句
            newWin.focus() //在IE浏览器中使用必须添加这一句
            setTimeout(function () {
                newWin.print() //打印
                console.log('开始打印')
                newWin.close() //关闭窗口
            }, 100)
        },
        deptid(record) {
            const result = this.findIndexArray(JSON.parse(JSON.stringify(this.treeFilter)), record)
            return result ? result.title : ''
        },
        findIndexArray(data, current) {
            var result = ''
            if (!data) {
                // return; 中断执行
                return
            }
            for (var i in data) {
                var item = data[i]
                if (item.id == current) {
                    result = item
                    break
                } else if (item.childrens && item.childrens.length > 0 && !result) {
                    result = this.findIndexArray(item.childrens, current)
                }
            }
            return result
        },
        info(record) {
            //单个打印
            this.printDoubleData = []
            console.log('record: ', record)
            const params = {}
            params.certificateNumber = record.certificateNumber //编号
            params.BeginYear = moment(record.certificateBegin).format('YYYY') //有效年
            params.BeginMonth = moment(record.certificateBegin).format('MM') //有效月
            params.BeginDo = moment(record.certificateBegin).format('Do').split('日')[0] //有效日
            params.EndYear = moment(record.certificateEnd).format('YYYY') //有效至年
            params.EndMonth = moment(record.certificateEnd).format('MM') //有效至月
            params.EndDo = moment(record.certificateEnd).format('Do').split('日')[0] //有效至日
            params.certificateName = record.certificateName //姓名
            params.certificatePhoto = record.certificatePhoto //证件照
            params.birthDate = record.birthDate //出生年月
            params.sex = record.sex //性别
            params.nativePlace = record.nativePlace //籍贯
            params.ethnic = record.ethnic //民族
            params.identityCardNumber = record.identityCardNumber //身份证号
            params.deptName = record.deptName //单位
            params.personnelType = record.personnelType //职务
            this.printDoubleData.push(params)
            this.visible = true
        },
        back() {
            this.visible = false
        }
    }
}
</script>
<style lang="less" scoped>
.photo {
    width: 30px;
    height: 30px;
}
</style>

<style scoped lang="less">
.contentt {
    width: 520px;
    height: 385px;
    margin: auto;
    // display: none;
    .prinRight {
        width: 519.7px;
        height: 384.2px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        // background-color: #e2f4d2;
        position: relative;
        font-family: STFangsong;
        .rightNumLeft {
            width: 50%;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            .photoDiv {
                width: 94.15px;
                height: 131.81px;
                background-color: white;
                text-align: center;
                margin-bottom: 12.5px;
                margin-left: 75.32px;
                .photo {
                    width: 100%;
                    height: 100%;
                    // display: inline-block;
                    // font-size: 11px;
                    // -webkit-writing-mode: vertical-lr;
                    // writing-mode: vertical-lr;
                }
            }
            .rightTitle {
                margin: 14.5px 0;
                width: 100%;
                font-family: STFangsong;
                text-align: left;
                font-size: 15px;
            }
            .rightTitles {
                margin: 5px 0;
                width: 100%;
                text-align: left;
                font-size: 15px;
                font-family: STFangsong;
            }
        }
        .rightTabRight {
            width: 50%;
            height: 100%;
            display: flex;
            align-items: center;
        }
    }
}

th,
td {
    margin: 0;
    padding: 0;
}

table {
    *border-style: solid;
    *border-color: #333;
    *border-width: 1px 0 0 1px;
    font-size: 13px;
    border-collapse: collapse;
}
table td,
table th {
    border-width: 1px;
    *border-width: 0 1px 1px 0;
    border-style: solid;
    border-color: #333;
    // background-color: #e2f4d2;
    box-sizing: border-box;
    text-justify: inter-ideograph;
}
table th {
    // background-color: #dedede;
    text-align: center;
    font-size: 13px;
}
table td {
    color: #000;
    font-weight: bold;
    font-size: 17px;
}
.border0 {
    padding: 0;
    *border-width: 0;
}
.border0 table {
    margin-left: -1px;
    margin-left: 0\9;
    border-style: hidden;
    *border-style: solid;
    border-width: 0;
}
</style>