如何只打印一个特定的 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>

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

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

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