Vue3利用vue-plugin-hiprint插件实现无预览打印（静默打印）

<template>
  <div>
    <button @click="printSilently">无预览直接打印</button>
  </div>
</template>
 
<script>
import { defineComponent } from 'vue';
import { usePrint } from 'vue-plugin-print';
 
export default defineComponent({
  setup() {
    const { print } = usePrint();
 
    const printSilently = async () => {
      try {
        // 设置打印机为无预览模式
        const printWindow = window.open('', '_blank');
        if (!printWindow) {
          throw new Error('打开窗口失败');
        }
        // 设置document.domain以允许跨域通信
        document.domain = document.domain;
        // 将print函数绑定到新窗口
        printWindow.print = print;
        // 触发打印操作
        printWindow.print();
        // 关闭新窗口
        printWindow.close();
      } catch (error) {
        console.error('打印失败:', error);
      }
    };
 
    return {
      printSilently,
    };
  },
});
</script>

这段代码示例展示了如何在Vue 3应用中使用vue-plugin-print插件来实现无预览直接打印的功能。首先，我们通过usePrint函数从插件中获取print函数。然后，我们定义了一个printSilently方法，在这个方法中，我们打开一个新的空白窗口，并将print函数绑定到这个窗口上。最后，当用户点击按钮时，我们触发打印操作并关闭新窗口。这个方法避免了打印预览界面，直接进行了打印操作。