vue打印功能 vue-print-nb

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

• 需要被渲染出来并且不能被隐藏才可以打印！！！
• 打印时浏览器默认是不打印背景图和背景色！！！

安装

vue2

安装

npm install vue-print-nb --save

全局引入

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

vue3

安装

npm install vue3-print-nb --save

全局引入

import print from 'vue3-print-nb'
...
app.use(print)

使用

打印页面

<template>
    <div>
     <button v-print="printObj">打印</button>
     <div id="printMe"  class="print-container">打印内容</div>
     </div>
</template>
<script>

export default {
  data() {
      return {
        printObj:{
          id: "printMe", //id
          popTitle:'表格',//页眉标题，页眉标题默认为Document Title
        }
      }
  },
}
</script>

背景色丢失

可进行全局引入或者按需引入组件
App.vue

<style lang="scss" media="print">
@media print {
  //为所有样式背景色
  html {
    -webkit-print-color-adjust: exact;
  }
  //也可单独某元素
  //   .el-button {
  //     -webkit-print-color-adjust: exact;
  //   }
  //   .el-tabs__active-bar {
  //     -webkit-print-color-adjust: exact;
  //   }
}
</style>

局部打印

<style lang="scss" media="print">
@media print {
   //无需打印内容的class
   .noPrint {
     display: none;
  }
}

打印内容缩放

<style lang="scss" media="print">
@media print {
   //打印内容的class
   .print-container {
    transform: scale(0.6);
  }
}
</style>

分页

适用于position 值为 relative 或 static 的非浮动块级元素

• pageBreakBefore

<div  style="page-break-before:always;"><br /></div>

详细用法

• pageBreakAfter
  

页面大小、方向

W3C 正在讨论如何处理和视图窗口有关的 的单位：vh、vm、vmin 和 vmax。目前，请不要在 @page 规则中使用他们。

@page {
  size:auto//默认
  //size:portrait;纵向
  //size:landscape;横向
  margin:1mm;
}

详细用法