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

Question

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

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

现在我只需要打印特定的组件（或保存为 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>

然后您可以在您的特殊组件上添加条件 class：

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

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

How to print only one specific vue component?