elizebeth/src/xt_pages/outpatientTool/signPrint.vue

<template>
    <div class="main-contain">
        <div class="position">
        <bread-crumb :crumbs="crumbs"></bread-crumb>
        <el-row style="float:right;">
            <el-col :span="24">
            <el-button size="small" icon="el-icon-printer" type="primary" @click="printAction">打印</el-button>
            </el-col>
        </el-row>
        </div>
        <div class="app-container" style="background-color: white;" v-show="show">
            <div id="sign" class="signPrint">
                <div style="display:flex;margin-bottom:10px;">
                    <div style="margin-left:15px;">
                        <div>C</div>
                        <div>09-15</div>
                        <div>09-15</div>
                    </div>
                    <div style="width:100px;">
                        <img id="barcode">
                    </div>
                </div>
                <div>6821737912312983</div>
                <div style="display:flex;">
                    <div style="padding-left:20px;">哈顺利到家啦收到了空间</div>
                    <div style="font-size:24px;">哈顺</div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import BreadCrumb from '@/xt_pages/components/bread-crumb'
import { getSchedualDoctors } from '@/api/advice'
import { parseTime } from '@/utils'
import print from 'print-js'
import JsBarcode from 'jsbarcode'
const moment = require('moment')
export default {
    components:{
        BreadCrumb
    },
    data(){
        return{
            crumbs: [
                { path: false, name: '标签打印' },
                { path: false, name: '打印' }
            ],
        }
    },
    methods:{
        printAction: function() {
            const style = '@media print { .sign{width:960px;margin: 0 auto;text-align: center;border-collapse: collapse;}.order_title_panl {text-align: center;.main_title {font-size: 18px;line-height: 40px;font-weight: 500;}}.dialysisTable tr{padding: 10px 0;}.dialysisTable th {color: #000;padding: 0;margin: 0;height: 30px;}.dialysisTable tr td {padding: 12px 0;}.subadvice_content {text-align: left;padding-left: 25px !important;padding-right: 5px !important;}.advice_content {text-align: left;padding-left: 5px !important;padding-right: 5px !important;padding: 15px 5px !important;} }'

            printJS({
            printable: 'sign',
            type: 'html',
            documentTitle: '  ',
            style: style,
            scanStyles: false
            })
        },

    },
    created(){
      JsBarcode('#barcode', 'DY2020080400088', {
        format: 'CODE39',
        lineColor: '#000',
        background: '#EBEEF5',
        width: 2,
        height: 40,
        displayValue: false
      })
    }
}
</script>


<style rel="stylesheet/scss" lang="scss" scoped>
.signPrint{
    -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 60px rgba(0, 0, 0, 0.06) inset;
    -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;
    margin-bottom: 20px;
    padding: 20px 10px;
}
.sign{
    width:960px;
    margin: 0 auto;
    text-align: center;
    border-collapse: collapse;
}
</style>