vue打印功能 vue-print-nb

最新推荐文章于 2024-10-10 21:48:11 发布

G_Jxxxxx

最新推荐文章于 2024-10-10 21:48:11 发布

阅读量799

点赞数 1

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/m0_60976718/article/details/130348797

版权

文章介绍了如何在Vue项目中使用vue-print-nb库来实现打印功能，包括在Vue2和Vue3中的安装和全局引入方法。内容涉及设置打印区域、处理背景色丢失问题、局部打印、内容缩放以及分页策略。同时，提到了@page规则在页面大小和方向设置中的应用。

摘要由CSDN通过智能技术生成

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;
}

详细用法