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

最终效果：

以上关于解决 vue-print-nb-element & vue-print-nb 在Huawei MatePad Air局部打印失效问题的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。