vue2中vue-print-nb实现打印功能

1、安装

npm install vue-print-nb --save

2、引入

// 1. 全局挂载，在main.js添加
import Print from 'vue-print-nb'
Vue.use(Print)
// or
// 2. 自定义指令，在单业务页面添加
import print from 'vue-print-nb'
directives: {
  print
}

3、参数配置

4、页面使用

<div id="printDiv">打印内容</div>
<el-button v-print="'#printDiv'">打印</el-button>
或
<el-button v-print="'printConfig'">打印</el-button>

<script>
export default {
  data() {
    return {
      printConfig:{
        id:'printPage', //被打印部分的id 
        popTitle: '配置页眉标题', // 打印配置页上方的标题
        extraHead: '打印', // 最上方的头部文字，附加在head标签上的额外标签，使用逗号分割
        preview: true, // 是否启动预览模式，默认是false
        previewTitle: '预览的标题', // 打印预览的标题
        previewPrintBtnLabel: '预览结束，开始打印', // 打印预览的标题下方的按钮文本，点击可进入打印
        zIndex: 20002, // 预览窗口的z-index，默认是20002，最好比默认值更高
        previewBeforeOpenCallback () { console.log('正在加载预览窗口！'); console.log(that.msg, this) }, // 预览窗口打开之前的callback
        previewOpenCallback () { console.log('已经加载完预览窗口，预览打开了！') }, // 预览窗口打开时的callback
        beforeOpenCallback () { console.log('开始打印之前！') }, // 开始打印之前的callback
        openCallback () { console.log('执行打印了！') }, // 调用打印时的callback
        closeCallback () { console.log('关闭了打印工具！') }, // 关闭打印的callback(无法区分确认or取消)
        clickMounted () { console.log('点击v-print绑定的按钮了！') },
        // url: 'http://localhost:8080/', // 打印指定的URL，确保同源策略相同
        // asyncUrl (reslove) {
        //   setTimeout(() => {
        //     reslove('http://localhost:8080/')
        //   }, 2000)
        // },
        standard: '',
        extarCss: ''
      },
    }
  }
}
</script>

5、打印样式设置

<style scoped media="print">
    /*指定打印的分页*/
   /deep/ section{
       page-break-after:always;
   }

   /*避免出现空白尾页*/
   html,body,#app{
       height: 98% !important;
       margin: 0px;
       padding: 0px;
   }
</style>

设置打印内容样式，不影响页面原有样式 以下内容为设置 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

例如

<div id="printPage">
    <section>
        第一页的内容
    </section>
    <section>
        第二页的内容
    </section>
</div>

<style>
section{
    page-break-after: always;
}
</style>

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

<p style="page-break-after: always;"></p>

7、移除末尾的空白页

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

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

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

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

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

<div class="no-print">
  这是需要隐藏的内容
</div>

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

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

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

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

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

10、解决打印数据不更新问题

动态绑定id实现打印对应数据，解决绑定固定id数据不更新问题。

HTML

<div
   class="settlement-box"
   v-for="settleData in multiMonthList"
   :key="settleData.number"
   v-loading="loading"
 >
    <el-button type="primary" round v-print="'#printDiv' + settleData.number"	>
   打印
 </el-button>
</div>

<div :id="'printDiv' + settleData.number" class="table-box">
打印内容
</div>

data

data(){
	return {
		multiMonthList: [],
	}
}