Vue 使用vue-print-nb实现打印功能

1，npm 安装 vue-print-nb 插件

npm install vue-print-nb --save

2，安装完成之后在 main.js 中引入并注册

//打印
// @ts-ignore
import Print from 'vue-print-nb'; 
Vue.use(Print);

注：使用vue+ts时以上述方法引入，在import时会报错，这时可以使用@ts-ignore让ts忽略这个错误，如果不是vue+ts，可以直接忽略@ts-ignore这一行

3，在组件中使用

<div id="printArea">
   <ChildDetail :childId="childId"></ChildDetail>
</div>

<el-button v-print="'#printArea'">报名信息打印</el-button>

 

vue-print-nb插件的一些优化

1.去掉页眉页脚

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

2.打印时没有背景色

Chrome & IE中在样式里加入这句话： -webkit-print-color-adjust: exact;

//解决打印没有背景色的问题
    .is-bordered-label {
        -webkit-print-color-adjust: exact;
        color: #909399 !important;
        background: #fafafa !important;
    }