1、 安装、引入和页面使用

• 安装依赖：npm install vue-print-nb --save
• 在main.js中引入

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

• 在需要打印的标签上加 id="myPrint"

<div id="myPrint">需要打印的内容</div>

• 在打印按钮标签上使用指令 v-print="print"

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

• 在data中定义print配置对象

 print: {
    id: 'myPrint',
    popTitle: '付款审核表', // 打印配置页上方标题
    extraHead: '', //最上方的头部文字，附加在head标签上的额外标签,使用逗号分隔
    extraCss: '',
 2、打印过滤
 
如果在打印区域中有不需要打印的内容，可以在给需要隐藏的内容的标签上添加类名，比如hidden
 
然后使用@media print 将其隐藏，@media print 里面是打印时才生效的样式
 
 @media print {
    .hidden{
      display: none;
3、页眉页脚
 
做完以上内容后，打印出来是图上的样子，会携带页眉页脚内容。
 
1> 如果不想要页眉页脚，则可以在@media print中设置。
 
@page{
    size:  auto;   /* auto is the initial value */
    margin: 5mm 5mm 3mm 15mm;  /* this affects the margin in the printer settings */
margin为打印内容和四周的边距，可根据自己内容进行调整。
 
2> 如果需要标题，但是页眉的字体又太小的话，可以在打印内容最上方添加标签
 
<div id="myprint">
  <div class="ymTitle">付款审核表</div>
然后在正常页面中设置display：none
 
在@media print中设置 文字大小，居中方式和边距等。
 
.ymTitle{
   display: block !important;
   font-size:24px;
   text-align: center;
   margin: 10px 0 40px 0;
这样页面就做好了
 
4、关于图片
 
另外还有一些小问题，比如打印不可使用css3样式，需要将图片从background修改为img，旋转，伸缩等也需要修改
				
一、这次使用的是vue-print-nb插件完成打印的功能。
借鉴链接：https://www.cnblogs.com/steamed-twisted-roll/p/10683680.html
文档：https://www.npmjs.com/package/vue-print-nb#usage-method
安装 npm install vue-print-nb --save
在main.js文件中注册
import Print from 'vue-print-nb'
Vue.us
vue-print-nb插件的使用
首先在文件中引入，注册该插件。注：可以在main.js中注册，也可以单独封装一个负责所有的全局自定义组件的文件
//main.js 中使用
import Print from 'vue-print-nb' //引入插件
Vue.use(Print) // 注册打印组件
或在scr/components/index.js进行注册
// scr/comp
				
最近项目中碰到一个需求，需要前端预览打印当前页面的内容，但是在打印的时候需要分页打印，想了很多办法，最后解决，在这做一个分享。
首先是打印，网上有很多方法，这里面我用的是一个插件   vue-print-nb --save，使用起来比较方便（缺点是不兼容IE，所以考虑兼容IE浏览器的小伙伴慎用）。
1.安装，直接通过npm安装     npm install vue-print-nb --save...
本博客源码:https://github.com/shengbid/vue-print,这里面只放了打印组件的代码,只需要这个功能的下载这个
https://github.com/shengbid/vue-demo 这个项目里平时博客写的一些功能的代码都放在里面,有需要可以下载看看,有帮助的话点个star哈
安装 npm install vue-print-..
				
vue-print-nb无法让多余内容分页,只显示一页,原因:外部盒子有overflow:hidden属性,如果改为inherit则可以
解决方法二,使用print.js插件,https://github.com/zxc19890923/print/blob/master/print.js下载插件,在项目中引用
// 搜索getStyle方法，添加：str += "<style>html,body,div{height: auto!important;font-size:14px}</
官网地址：https://github.com/Power-kxLee/vue3-print-nb
npm install vue3-print-nb --save
// Global instruction 
import { createApp } from 'vue'
import App from 
				
vue-print-nb是一个Vue.js的第三方库，可用于在浏览器中打印页面。要在打印输出中添加分页，你需要在CSS样式中使用@media print查询来指定打印时的样式。下面是一个示例代码：
```css
@media print {
  .page-break { 
    page-break-after: always; 
这个CSS代码片段将在打印时创建一个分页效果。然后，你需要在HTML中添加一个具有.page-break类的元素，以指定何时在页面上插入分页。例如：
```html
<div class="page-break"></div>
在需要插入分页的地方添加这个元素，然后在打印时就会自动创建分页了。注意，在使用vue-print-nb打印页面时，你需要确保这个CSS样式和HTML元素已经正确地引入到了打印输出的HTML页面中。