在 iframe 中加载 PDF 而 iframe 后面没有 html 页面？答案

【问题标题】：Loading PDF in an iframe with out the html page behind the iframe?在 iframe 中加载 PDF 而 iframe 后面没有 html 页面？
【发布时间】：2021-09-02 09:14:23
【问题描述】：

stackblitz code sample

我正在开发一个用于导出 PDF 的 Angular 应用程序。

我的应用程序结构：我有 2 个组件（登录，主页），在登录组件中创建了一个按钮（导出），它将用户导航到主页组件，在 ViewInit 之后它将基于主页组件 html 生成 pdf。一切正常，除了我在后台看到 html 和 PDF 表单。我的解决方案：我们可以使 pdf 全帧（100%），但我需要一个按钮才能返回上一页。

问题：

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

【问题讨论】：

为什么不在弹出窗口中打开 PDF？
这是我们的设计，@Chin.Udara
@Chin.Udara 如果我们没有其他选择，那么我会要求我的 PO 考虑弹出
好的，你可以在tablepdf div 中添加一个style="display: none"。 PDF 仍将使用元素的innerHTML 生成。
@Chin.Udara with disply none ，我们需要在 iframe 下方显示按钮才能返回上一页。但它没有出现？

标签： javascript css angular8 jspdf

【解决方案1】：

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

正如我在评论中建议的那样；你可以display: nonetablepdf div。

您的 iFrame 在该 div 下方。所以它不会影响你在tablepdf之外的任何内容。

将显示设置为无后，您看不到后退按钮，因为后退按钮位于 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>

【讨论】：