解决 vue-print-nb-element & vue-print-nb 在Huawei MatePad Air局部打印失效问题

vue-print-nb-element 与 vue-print-nb 两款插件类似，都是基于 Vue 实现打印功能。

在电脑端调用打印机正常：

Huawei MatePad Air 端调用打印机失效：

原来设置了只打印弹框中的表格部分内容，实际上却将整个浏览器 tab 页进行打印。

取巧的做法的思路：

1. 获取浏览器的代理

华为的平板可以切换电脑模式：

电脑版的显示，看出来唯一的区别是，我本机的 Chrome 是 123 的版本，华为是 99 的版本。

2. 判断 Chrome 的版本 99 或是 华为浏览器，打印区域弹窗全屏

created() {
 const nu = navigator.userAgent
 const pattern = new RegExp("Chrome" + "[ \\/]([\\d]+)");
 const match = nu.match(pattern);
 if (match && match.length > 1) {
   const detectedVersion = parseInt(match[1], 10);
   if (detectedVersion<123 || nu.indexOf('HuaweiBrowser/') > -1) {
     this.fullscreen = true
   }
 }
  },

3. 隐藏元素

3.1 隐藏两个按钮

css:

@media print {
  @page { size: A4 portrait; }
  .no_print {
    display: none;
  }
}

3.2 隐藏弹窗的 X

:show-close="!params.fullscreen"

4. 全屏+隐藏右上角关闭 X, 只剩下关闭按钮

为了避免用户点击浏览器的回退，平板上关闭了打印机直接关闭弹窗。

printObj: {
 id: "xx",
 extraCss: "xx",
 extraHead: 'xx',
 closeCallback (vue) {
   if (vue.fullscreen) {
     vue.show = false;
   }
 }
}

最终效果：