时间戳

首页 > 解决方案 > Vuex Vue如何打印子组件而不在父组件上渲染

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

问题描述

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

打印组件而不必在活动页面上呈现它的最佳做法是什么？

我尝试在页面上渲染组件，visibility: hidden;以便组件渲染然后我可以单击按钮，window.print()但这似乎是一种技巧，而不是最佳实践，而且它为我的实例增加了一个巨大的空白空间。

我需要一种方法来打印表单（组件）而不实际在页面上呈现它。

我该如何解决这个问题？

标签： vue.jsvuex

解决方案

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

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>

推荐阅读