前端基础：vue-print-nb的使用流程

vue-print-nb

常见的打印有JavaScript打印、jQuery、vue打印，这里主要讲述vue使用vue-print-nb进行打印

1.使用步骤

1、安装依赖：npm install vue-print-nb --save

2、在main.js中引入

javascript 复制代码

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

3、在组件的打印区域标签上加 id="printArea"

javascript 复制代码

<div id="printArea"> 打印区域 <div>

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

javascript 复制代码

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

5、在组件的data中定义print配置对象

javascript 复制代码

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

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

只需要在组件的打印区域里，给需要隐藏的内容的标签上添加

javascript 复制代码

class="noprint"

3. 配置打印的样式

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

javascript 复制代码

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

html {
  background-color: #ffffff;
  height: auto;
  margin: 0px;
}
</style>

4.处理常见的打印bug

1. 全局打印生效

解决打印出现空白页的问题

解决el-table表格内容过多，打印不全问题

解决作用域污染问题导致el-table序号错位

javascript 复制代码

<style media="print" lang="scss">
@page {
  size: auto;
  margin: 3mm;
}
@media print {
  html {
    background-color: #ffffff;
    height: auto;
    margin: 0px;
  }

  body {
    border: solid 1px #ffffff;
    margin: 10mm 15mm 10mm 15mm;
  }
  table {
    table-layout: auto !important;
  }

  .el-table__header-wrapper .el-table__header {
    width: 100% !important;
    border: solid 1px #f2f2f2;
  }
  .el-table__body-wrapper .el-table__body {
    width: 100% !important;
  }
  #pagetable table {
    table-layout: fixed !important;
  }
}
</style>

2. 局部打印，局限在当前组件里

在组件标签

javascript 复制代码

<style media="print" lang="scss">
@page {
  size: auto;
  margin: 3mm;
}
@media print {
  html {
    background-color: #ffffff;
    height: auto;
    margin: 0px;
  }

  body {
    border: solid 1px #ffffff;
    margin: 10mm 15mm 10mm 15mm;
  }
  #printArea table {
    table-layout: auto !important;
  }

  #printArea .el-table__header-wrapper .el-table__header {
    width: 100% !important;
    border: solid 1px #f2f2f2;
  }
  #printArea .el-table__body-wrapper .el-table__body {
    width: 100% !important;
  }
  #printArea #pagetable table {
    table-layout: fixed !important;
  }
}
</style>

注意

启动打印后可以通过调整设置的缩放来调整显示比例
可以通过设置背景图形来控制页面是否使用彩色背景