如何只打印一个特定的 vue 组件？

Question

我正在制作需要下载的文凭。

所以我制作了特定的 vue 组件（文凭本身），它在 dom 中但用 v-show 隐藏（显示：无）。

现在我只需要打印该特定组件（或另存为 pdf），而不是整个页面。 所以我无法启动 window.print()，但我需要以某种方式对特定组件进行沙箱处理，所以我想我可以使用隐藏的 iframe 并在那里加载组件并在iframe.contentWindow.print() 上启动打印。

一个问题是我看不到如何在 iframe 中加载组件。

一种方法是使用类似的东西

 iframe.srcdoc = downloadRef.value.$el.innerHTML;

但我没有这种样式。

我也尝试了一些类似的东西

 iframe.srcdoc = ` ${css} ${downloadRef.value.$el.innerHTML}`;

其中 css 是带有样式的样式标记字符串，但同样并非所有样式都适用。

有没有其他方法可以将 vue 组件加载到 iframe 中并渲染它（自然地使用 vue），或者有没有其他方法可以在完全不使用 iframe 的情况下使某些组件在应用所有必要样式的情况下可打印？

提前致谢。

Answer 1

我认为有一种更简单的方法可以在不使用 iframe 的情况下实现您的需求。

如果您可以为该组件应用某种 css 样式，这将使它占据整个页面并覆盖所有其他内容会怎样

<style>
  .overlay {  
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index:1000;
  }
</style>

• 归功于How to make a div fullscreen and atop of all other elements with jQuery?

然后您就可以在您的特殊组件上添加一个条件类：

<special-component :class="{'overlay': isPrintModeEnabled}"> ...

剩下的就是根据您的要求启用isPrintModeEnabled 属性。