如何在 vue2 中使用 vue-print-nb 打印功能

插件官网地址 https://www.npmjs.com/package/vue-print-nb

1. 安装

npm install vue-print-nb --save

2. 导入打印插件

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

3. 配置参数

4. 页面使用

打印内容

打印

或

打印

5. 打印样式设置

设置打印内容样式，不影响页面原有样式
以下内容为设置 element table 在打印时的样式，防止打印不全

@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; */
  }
  #print table {
    table-layout: auto !important;
  }
  #print .el-table__header-wrapper .el-table__header {
    width: 100% !important;
    border: solid 1px #f2f2f2;
  }
  #print .el-table__body-wrapper .el-table__body {
    width: 100% !important;
    border: solid 1px #f2f2f2;
  }
  #print #pagetable table {
    table-layout: fixed !important;
  }
  #print .el-table__empty-block {
    width: 100% !important;
    height: auto !important;
  }
  #print .el-input-number--small{
    width: 100% !important;
  }
 
}

6. 分页

在要进行分页的标签上，添加以下样式

page-break-after:always

例如

    

        第一页的内容
    
    

        第二页的内容
    

或者 在需要分页的内容最后加上

7. 移除末尾的空白页

若打印时，末尾总是出现空白页，则存在定义了height:100%的元素，删除掉此样式即可
通常都是因为存在以下样式导致,通常被定义在全局样式文件中，或index.html中

html,body,#app{
    height: 100%;
}

8. 隐藏打印区域中的某个div

您可以通过在需要隐藏的div上添加class="no-print"，然后在打印样式中设置该类的display属性为none来实现隐藏。具体步骤如下：

1. 在需要隐藏的 div 上(测试 必须是 div 标签)添加class="no-print"，例如：

  这是需要隐藏的内容

2. 在打印样式中设置该类的display属性为none，例如：

@media print {
  .no-print {
    display: none;
  }
}

这样，在打印预览或者实际打印时，带有 class="no-print" 的 div 就会被隐藏掉。

9. window.print() 浏览器打印功能

js 执行 window.print() 就会调用谷歌浏览器的打印功能。