Vue 前端实现无感打印 - 使用 print-js 库

为了实现无感打印，可以使用 Vue.js 和一些打印相关的 JavaScript 库来实现。例如，`print-js` 库就是一个常用的选择。

首先，在 Vue 组件中，需要引入 `print-js` 库。可以使用 npm 安装该库：

npm install print-js

然后，在 Vue 组件中，可以使用 `print-js` 库的 `print` 方法来实现打印功能。在需要打印的元素上，添加一个点击事件，然后在事件处理程序中调用 `print` 方法。

<template>
  <div>
    <button @click='print'>打印</button>
    <div id='print-content'>
      <!-- 打印的内容 -->
    </div>
  </div>
</template>

<script>
import printJS from 'print-js'

export default {
  methods: {
    print() {
      printJS({
        printable: 'print-content',
        type: 'html',
        documentTitle: '打印',
      })
    },
  },
}
</script>

在上面的代码中，使用 `printJS` 函数来实现打印功能。`printable` 参数用于指定需要打印的元素的 ID，这里指定为 `print-content`。`type` 参数指定打印的内容类型为 HTML。`documentTitle` 参数用于指定打印的文档标题。

当点击“打印”按钮时，会调用 `print` 方法，然后调用 `printJS` 函数来打印 `print-content` 元素中的内容。

需要注意的是，为了确保打印的效果符合预期，可以在打印的样式表中添加 `@media print` 样式规则，用于指定打印时的样式。

@media print {
  /* 打印时的样式 */
}

这样，当执行打印操作时，就可以实现无感打印的效果。