1

I'm making diploma which needs to be downloadable.

So I made specific vue component (diploma itself) which is in the dom but hidden with v-show (display: none).

Now I only need that specific component to be printed (or saved as pdf) and not a whole page. So I cannot initiate window.print(), but I need somehow to sandbox specific component, so I figured I could use hidden iframe and load component there and initiate print on iframe.contentWindow.print().

One problem is I don't see how I can load component in an iframe.

One way would be to use something like

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

but I don't have styling this way.

I also tried something along the lines of

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

where css is style tag string with styles, but again not all styles are applicable.

Is there any other way to load vue component into iframe and to render it as such (with vue naturally), or is there any other way to make certain component printable with all necessary styles applied, without using iframe at all?

Thanks in advance.

4

1 回答 1

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根据您的要求启用该属性。

于 2021-10-15T17:58:26.843 回答