vue 打印区域内容 vue-print-nb

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

一、安装依赖：npm install vue-print-nb --save，并且在main.js中引入

 //引入

import Print from 'vue-print-nb' // 打印

Vue.use(Print)

二、在组件需要打印的区域元素标签上加 id="printArea"

<!-- 需打印区域 -->
<div id="printArea" class="printArea">
    <div class="print-title">生产任务单</div> 
    <table class="print-table" border="1" cellspacing="0">
        <tr>
          <td rowspan="2">产品代码</td><td rowspan="2">{{ valPrint.productId }}</td>
          <td>产品名称</td><td>{{ valPrint.productName }}</td>
          <td>生产数量</td><td>{{ valPrint.planCount }}</td>
          <td>计划日期</td><td>{{ valPrint.planStarttime }}</td>
        </tr>
        <tr>
          <td>生产任务号</td><td>{{ valPrint.planId }}</td>
          <td>规格型号</td><td>{{ valPrint.productSpec }}</td>
          <td>预计完成日期</td><td>{{ valPrint.planEndtime }}</td>
        </tr>
        <tr>
          <td>说明</td>
          <td colspan="4">
            <el-input v-model="tableData.textarea" type="textarea" :rows="4" placeholder="请输入说明内容" style="width: 90%" />
          </td>
          <td>卡类型</td>
          <td colspan="2">
            <el-input v-model="tableData.type" placeholder="请输入卡类型" style="width: 90%" />
          </td>
       </tr>
   </table>
<div>

三、在组件的打印按钮标签上使用指令 v-print="print",  其中print是配置对象

<el-button v-print="print" type="primary">打印</el-button>

四、定义print配置对象

print: {
        id: 'printArea',
        popTitle: '打印', // 打印配置页上方标题
        extraHead: '', //最上方的头部文字，附加在head标签上的额外标签,使用逗号分隔
        preview: '', // 是否启动预览模式，默认是false（开启预览模式，可以先预览后打印）
        previewTitle: '', // 打印预览的标题（开启预览模式后出现）,
        previewPrintBtnLabel: '', // 打印预览的标题的下方按钮文本，点击可进入打印（开启预览模式后出现）
        zIndex: '', // 预览的窗口的z-index，默认是 20002（此值要高一些，这涉及到预览模式是否显示在最上面）   
        previewBeforeOpenCallback() {}, //预览窗口打开之前的callback（开启预览模式调用）
        previewOpenCallback() {}, // 预览窗口打开之后的callback（开启预览模式调用）
        beforeOpenCallback() {}, // 开启打印前的回调事件
        openCallback() {}, // 调用打印之后的回调事件
        closeCallback() {}, //关闭打印的回调事件（无法确定点击的是确认还是取消）
        url: '',
        standard: '',
        extraCss: '',
      },

五、其他配置

1、打印过滤（隐藏打印区域不需要打印的内容）

// 在组件的打印区域里，给需要隐藏的内容的标签上添加class="noprint"，即可

2、打印样式

在全局样式中，新增<style media="print"></style>标签，添加打印时才生效的样式

<style media="print" lang="scss">
@media print {
  .el-textarea__inner{
    border: none !important;
  }
  .el-input__inner{
    border: none !important;
  }
  .el-input__suffix{
    display: none;
  }
}
</style>