Vuex Vue如何打印子组件而不在父组件上渲染

Question

我在摘要页面上有一个按钮，@click将打印未在该特定实例上呈现的已完成内容。

在不将其呈现在活动页面上的情况下打印组件的最佳实践是什么？

我尝试使用visibility: hidden;在页面上呈现组件，以便呈现组件，然后我可以单击按钮window.print()，但这似乎是一种技巧，而不是最佳实践，而且会增加大量内容我的实例的空白空间。

我需要一种无需实际在页面上呈现即可打印表单（组件）的方法。

我该如何解决问题？

Answer 1

看看@media个功能（在您的情况下为@media print）。只需创建一个将始终应用display: none;的CSS类，除非浏览器处于打印模式。

Vue.component('my-component', { template: '<h1 class="print">Hello World</h1>' }, )

new Vue({
  el: "#app"
})

.print {
  display: none;
}

@media print {
  .print {
    display: initial;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <my-component></my-component>
</div>