vue中实现打印功能的方法与注意事项

常见的实现打印的方式：
1.javaSript 的 window.print() ------------打印范围不可控
2.C-Lodop （打印插件） -----------------要装插件太麻烦
3.jquery.PrintArea.js打印 -----------------简单易用

项目采用的实现方式：第三种，引用jquery.PrintArea.js打印插件

一、使用方法：

1. 在HTML中

1.引入要用的js

<script type="text/javascript" src="../jquery/jquery.PrintArea.js"></script>

2.设置要打印的区域， html+css语句实现打印内容的绘制，id定义打印区域

<div id="print">
  //打印区域------
</div>

3.打印语句 ，通过id获取元素实现打印

$("#print").printArea();

2. 在VUE项目中

将需要打印的页面绘制成组件，在需要实现打印功能的页面引入。

  <!-- 实例化引用的打印组件   -->
 <print-index style="display: none;" ref="PrintIndex"/>
 <!--  引入打印组件   -->
 import PrintIndex from '@/components/Print/index'
  <!--  引入打印插件   -->
import Print from '@/utils/printarea.js';
  <!--  注册组件   -->
 components: {
    PrintIndex
  },

  <!--  点击打印按钮，调用打印方法，先通过$refs方法给组件赋值，然后 new Print（）调用打印方法 -->
    async handleOk() {
      await this.$refs.PrintIndex.see(this.printDatas);
      console.log("打印中");
      this.$nextTick(() => {
          let print = new Print({
            el: "#PrintIndex",
          });
        }
      )
    },

二、问题总结

1. 设置打印方向

横向：landscape；
纵向：portrait ；
自定义 ：auto ；
定义为A4纸：A4
更多配置及具体描述参见此链接

@page {
  size: auto; // 自定义
 // size:a4;//定义为a4纸
 // margin:0 0 0 50px;//页面的编剧
}

 //定义纸张旋转
#PrintIndex{
    page: rotated; //引用旋转
	page-break-before:avoid;//前面不加空页
	page-break-after:avoid;//后面不加空页
}

*注 ： 应尽可能不在@page{}事件中，定义当前页面打印内容的特殊样式，全局有多个打印组件、组件内多次定义了@page{}时，可能会引起正式环境打印样式的混乱，页面方向和间距可能会互相影响。

2. 设置打印高度

1. 单张打印

直接调用即可，一般不会出现什么问题。

2. 循环打印

当打印需要实现多个页面内容同时打印且分别需要循环时（如：打印单据，有五种单据样式，每种单据有多张，打印时需要将五种单据的全部数据同时打印）

1. 如果打印的内容一页对应一条数据，那可以直接给组件高度设置为100vh，然后在组件外层添加循环操作。
2. 如果打印内容，多条数据对应一页（比如一张纸打印三条单据时），此时应给组件的外层设置一个动态高度，否则可能会出现打印内容重叠的情况。动态样式设置方法：

<div>
  <!--    设置打印id -->
  <div id="PrintIndex">
    <!--    动态设置高度 -->
     <div :style="{height: bodyHeight}">
      <!--   数据循环 -->
      <div v-for='(item,index) in resultData' class="container">
        <!--   此处绘制打印内容 -->
      </div>
    </div>
  </div>
</div>

// 绑定动态样式
:style="{height: bodyHeight}"

// 初始化时根据数据条数计算打印页面所占高度
this.bodyHeight = `${Math.ceil(res.length / 3) * 100}vh`

3. 获取打印操作的回调

在PrintArea.js文件中，this.settings对象中自己添加success: ()=>{}方法，并在 print()方法中添加"afterprint"时间监听，在监听中调用 this.settings.success()：

  print(PAWindow) {
    let paWindow = PAWindow;
    paWindow.addEventListener('afterprint', () => {
      console.log('print after')
      this.settings.success()
    })
    console.log('---调用打印 focus-----');
    paWindow.focus();
    paWindow.print();
    console.log('---调用打印 print-----');

  };

即可在页面调用打印时获取到打印操作的回调：

async handleOk() {
  await this.$refs.PrintIndex.see(this.printDatas);
  console.log("打印中");
  this.$nextTick(() => {
      let print = new Print({
        el: "#PrintIndex",
        success: () =>{
        // 打印时间的回调，打印后要进行的操作或判断写在这里
        }
      });
    }
  )
},

*注：此打印方式是唤起浏览器自带的打印功能，点开后有“打印”和“取消”两个按钮，但无法监听到用户到底是进行了什么操作，success的回调只能监听到打印预览页面关闭的操作，即我们只能知道页面中成功唤起了打印页面后，打印的预览页面被关闭了。

*注：如果打印内容中有表格，为避免表格打印时，一行的内容被两张纸断开打印，需要给表格增加 break-inside: avoid属性。

4. 添加强制分页

如果打印的内容高度无法确定，且需要循环打印，为了保证打印的每一份内容都是独立的，不产生断页，需要在一次循环打印的内容尾部添加分页符，可以将下方语句放到循环打印的代码段最下方，即可实现分页效果。

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

将打印内容转化为pdf预览的另一种方式

打印样式中不推荐使用背景，因为浏览器默认情况下并不能打印出CSS中的背景内容，只有当浏览器被设置可以打印背景的情况下才能打印出背（ie的高级选项中可选），如果需要使用此方式可以参照此链接
或此链接

打印网络资源图片不显示，解决方案 ： 等待网络资源图片加载完成后，在打印，代码：

$(doc).find('.qrcode-down').load(function () {
 	iframe.contentWindow.print();
    window.location.reload()
})

5. 媒体查询设置打印样式常用内容：

@media print {
    
    @page {
      /* 纵向打印 */
      // size: portrait;

      /* 横向打印 */
      size: landscape;

      /* 去掉页眉页脚*/
      margin-top: 0;
      margin-bottom: 0;
    }
    /* 告诉浏览器在渲染它时不要对框进行颜色或样式调整 */
    * {
      -webkit-print-color-adjust: exact !important;
      -moz-print-color-adjust: exact !important;
      -ms-print-color-adjust: exact !important;
      print-color-adjust: exact !important;
    }

    /*打印不显示打印按钮*/
    .print-button-container {
      display: none !important;
    }
    
    /* 伪类 :first 用于匹配到文档的第一页, 首页上页边距设置为 10cm */
    @page :first {
      margin-top: 10cm; 
    }
    
    /* 通过分别设置左页和右页不同的左右页面距，为装订边留出更多的空间 */
    /**/
    @page :left {
      margin-left: 2.5cm;
      margin-right: 2.7cm;
    }
    @page :right {
      margin-left: 2.7cm;
      margin-right: 2.5cm;
    }
    
    
    
  }