【vue-打印】

vue-打印

下载插件：vue-print-nb：npm install vue-print-nb --save
插件引入：main.js-

import Print from 'vue-print-nb'
Vue.use(Print);  

<div class="center_training">
                        <div class="center_training_title flexAlignCnter flexBetween">
                            <div class="center_training_titles">课程</div>
                            <div class="center_training_print csp flexCenter"  v-print="printObj">打印</div>
                        </div>
                        <!--***v-print和打印内容的id-->
                        <div id="print_demo">
                            <div class="center_traning_credential flexJusCenter" >
                                <div class="center_prove_bg">
                                    <div class="center_prove_title">
                                        <img src="/static/images/main/prove_title.png" alt="">
                                    </div>
                                    <div class="center_prove_content">
                                    	内容......   
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

printObj: {
	id: "print_demo",
  	popTitle: '标题',
 	extraHead: '<meta http-equiv="Content-Language"content="zh-cn"/>'
}

打印样式

<style media="print">
@page {
  size: auto;
  margin: 3mm;
}

html {
  height: auto;
  margin: 0px;
}
.center_traning_credential{
    padding-top: 10px;
    height: 820px;
}
 .center_traning_credential .center_prove_bg{
    width: 983px;
    height: 1473px;
    background: url('/static/images/main/prove_bg.png') no-repeat;
    background-size: 100% 100%;
    background-position: top center;
    position: relative;
}
 .center_traning_credential .center_prove_bg .center_prove_title{
    position: absolute;
    top: 190px;
    left: 50%;
    transform: translate(-50%, 0);
}
.center_traning_credential .center_prove_bg  .center_prove_content{
    font-size: 33px;
    color: #060001;
    padding: 0 86px;
    padding: 0px 150px;
    position: absolute;
    top: 470px;
    
}
.center_traning_credential .center_prove_bg  .center_prove_content p{
    line-height: 80px;
}
.center_traning_credential .center_prove_bg  .center_prove_content span{
    border-bottom:2px solid #060001 ;
}
.center_traning_credential .center_prove_bg  .center_prove_erm{
    margin: 1000px 130px 0 130px;
}
.center_traning_credential .center_prove_bg  .center_prove_timer{
    text-align: right;
    padding:50px 130px 0;
    font-size: 19px;
    color: #040000;
}
</style>

正常style里面写pc端的样式