自定义打印

在Vue中自定义浏览器打印需要用到HTML和CSS。我们可以使用标准的HTML和CSS来定制打印样式。

首先，我们可以通过以下方式来指定需要打印的DOM元素：

<template>
  <div class="print-content">
    <!-- 需要打印的内容 -->
  </div>
  <button @click="printPage">打印</button>
</template>

其中，我们使用一个具有特定class名的`<div>`元素来包裹需要打印的DOM元素，如上面的`print-content`。在点击打印按钮时，我们可以调用`window.print()`方法来触发浏览器的打印功能。

接下来，我们需要使用CSS来定义打印样式。我们可以使用`@media print`媒体查询来指定打印时的样式，例如：

@media print {
  .print-content {
    font-size: 14px;
    line-height: 1.5;
  }
  
  /* 隐藏不需要打印的元素 */
  .no-print {
    display: none !important;
  }
}

在以上代码中，我们使用了`@media print`媒体查询来指定打印时的样式。在打印时，会自动应用这些样式。例如，此处通过修改`.print-content`元素的字体大小和行高来调整打印时元素的样式。我们还定义了一个`.no-print`类，以便在打印时隐藏这些元素。

最后，在Vue组件中定义`printPage`方法，来触发浏览器的打印功能：

<template>
  <div class="print-content">
    <!-- 需要打印的内容 -->
  </div>
  <button @click="printPage">打印</button>
</template>
<script>
export default {
  methods: {
    printPage() {
      window.print()
    }
  }
}
</script>

<style>
@media print {
  .print-content {
    font-size: 14px;
    line-height: 1.5;
  }
  
  /* 隐藏不需要打印的元素 */
  .no-print {
    display: none !important;
  }
}
</style>

以上代码中，我们在组件中定义了`printPage`方法，并在按钮的`click`事件中调用该方法来触发浏览器的打印功能。另外，我们使用CSS来定义了打印时的样式。