在 iframe 后面没有 html 页面的情况下在 iframe 中加载 PDF？

Question

我正在开发 angular 导出 PDF 的应用程序。

我的应用程序结构：我有 2 个组件（登录、主页），在登录组件中创建了一个按钮（导出），它将把用户导航到主页组件，在 ViewInit 之后，它将根据主页组件生成 pdf html。一切正常，除了我在背景中看到 html 以及 PDF 表单。我的解决方案：我们可以制作 pdf 全帧 (100%)，但我需要一个按钮返回上一页。

问题：

我们怎样才能让html在屏幕后面隐形
有没有什么方法可以在不使用 2 个组件和路由的情况下实现这一点（例如：在同一登录组件中隐藏 html）？

Answer 1

我发布了一个答案，因为这太多了，无法写成评论。

正如我在评论中所建议的；你可以 display: none tablepdf div.

您的 iFrame 低于 div。因此它不会影响您在 tablepdf.

之外的任何内容

将显示设置为 none 后，您看不到后退按钮，因为后退按钮位于 iFrame 后面。 iFrame 设置为 position:fixed

要显示后退按钮，您可以进行以下更改。

<!-- set the parent div height to 100vh so that the 90% height in the iFrame can work properly -->
<div class="row" style="height: 100vh">
   <!-- remove the position: fixed so that your button can be shown below the iFrame -->
   <iframe id="main-iframe" style="width: 90%; height: 90%; z-index: 2; border: none;"></iframe>
   <button class="btn btn-primary " (click)="goback()">go back</button>
</div>

在 iframe 后面没有 html 页面的情况下在 iframe 中加载 PDF？

Loading PDF in an iframe with out the html page behind the iframe?

javascript

css

angular8

jspdf