使用 iFrame 嵌入 Excel 文件无法正常工作答案

【问题标题】：Embedding Excel file with iFrame not working correctly使用 iFrame 嵌入 Excel 文件无法正常工作
【发布时间】：2021-01-21 13:38:24
【问题描述】：

我正在使用 iframe 将 Excel 文件嵌入到使用 Microsoft OneDrive embed function 的 HTM 页面中，它会显示 excel 文件，但不会嵌入它，它会使整个页面成为 excel 文件。

所以它占据了整个页面，我失去了具有导航的网站的侧边栏和工具栏。

我尝试将其包含在 div 中并将类样式应用于 div 和 iframe，这是我用于嵌入的 PDF 的内容，效果很好，但它仍然没有将 excel 文件限制为嵌入的窗口.

这是我用于 excel iframe 的内容：

<body>
    <iframe width="100%" height="100%" frameborder="0" scrolling="no" src="https://onedrive.live.com/embed?resid=7CDAFECF25AB92FC%21110&authkey=%21AGaGmMnPaiFZ0Ew&em=2">
        </iframe>
 </body>

这就是我用于我的 PDF iframe 的内容：

<body>
    <div class="container"><iframe class="responsive-iframe" src="PS-U-A150FUI.pdf"></iframe>
    </div>
</body>

编辑：这里有一些图片可以更好地显示问题，第一张图片是正确嵌入网页中的 PDF。其次是超越网页的excel doc。

PDF Embed Excel Embed

【问题讨论】：

标签： html excel iframe embed onedrive

【解决方案1】：

您的代码如下：

<iframe width="100%" height="100%" frameborder="0" scrolling="no" src="https://onedrive.live.com/embed?resid=7CDAFECF25AB92FC%21110&authkey=%21AGaGmMnPaiFZ0Ew&em=2">
</iframe>

您在 HTML 中使用了 100% 宽度和 100% 宽度。所以 iframe 占据了整个屏幕。

举个例子：你需要框架是 500px 宽和 700px 长，那么你可以使用width=“500px” 以及 iframe 中的 height=“700px” 属性或使用以下 css：

 iframe {
  width: 500px;
  height: 700px;
}

基本上我想说的是，您应该为 iframe 使用更小的像素值/百分比。

【讨论】：

这只是将它设置为接管 500x700 的网页。我使用 % 因为它是一个包含在更大的总体响应式 html5 布局中的 html 页面。所以它将是响应区域中可用空间的 100% x 100%，但同样，它仍然覆盖了整个网页并用 excel 框架替换它，并且没有将其嵌入到页面中。
这正是我想要解释的。如果您使用 100% 作为宽度和高度，则 iframe 会覆盖整个页面。如果您对高度和宽度使用较小的像素值或较小的百分比。我不是告诉你不要使用百分比，而是说，使用较小的值。
我在回复您的评论时更新了我的帖子，我尝试将其设置为 500x500 并没有解决问题，它仍然用 excel 表格覆盖了网页，但只是在角落里.
这是必须的，因为 html 默认将对象放在左上角。您可以在 div 中使用 iframe。 position、padding css 也可以帮你定位。