Bootstrap modal - 添加嵌入 PDF 的对象标签答案

【问题标题】：Bootstrap modal - Add a object tag embedding a PDFBootstrap modal - 添加嵌入 PDF 的对象标签
【发布时间】：2014-06-14 00:58:11
【问题描述】：

我目前正在尝试显示一个引导模式，我想在其中包含一个带有“对象”html 标记的 PDF 文件。问题是似乎什么都没有显示。

所以你会找到一个基本的模态（与引导程序中的代码完全相同，用于在单击按钮后显示的基本模态），你会在模态体中找到：

<object type="application/pdf" data="http://www.inkwelleditorial.com/pdfSample.pdf" width="500" height="500">this is not working as expected</object>

因此，当我单独添加此代码（而不是在引导模式中）时，它会按预期工作。它在浏览器的默认 pdf 查看器中显示 pdf。但是当我尝试在引导模式中实现 pdf 时，似乎什么都没有出现。

如果您有任何想法，它确实会对我有帮助，我需要花费大量时间进行搜索，但我只看到了带有标签的解决方案（我不想使用）。

谢谢你和最好的问候

【问题讨论】：

【解决方案1】：

我发现 bootstrap 包含一个影响在模式窗口中查看 pdf 的 css 属性。

改变这个：

.modal.in .modal-dialog {
  transform: translate(0px, 0px);
}

到：

.modal.in .modal-dialog {
  transform: none;
}

如果更改此属性，则一切正常。

您可以看到实际效果：

【讨论】：

【解决方案2】：

阻止下载管理器： 同样，如果您有 Internet 下载管理器或任何其他自动捕获 pdf 的下载管理器，请尝试阻止它自动捕获 pdf 链接。

也结帐PDFObjectJS，应该很有趣

<script src="https://github.com/pipwerks/PDFObject/blob/master/pdfobject.min.js"></script>

编辑

请尝试使用 iframe 代替对象类型 pdf

<iframe src="http://www.inkwelleditorial.com/pdfSample.pdf" width="500" height="500"></iframe>

【讨论】：

在我阅读了“pdfobject”库之后，它对我没有帮助。我的问题不是显示pdf（您可以看到更新的示例：jsfiddle.net/mV6jJ/5），如果它包含在正文中，效果会很好。问题只是当我尝试打开引导模式时，它不会显示其中的 pdf。
您正在尝试哪个浏览器？例如，我也无法在 Windows 8 IE App 模式下查看您的最后一个示例。
我正在尝试 FF 25.0，PDF 显示良好。我知道在某些浏览器上显示效果不佳（我必须为 IE 添加一些条件，但我只是设置了一个非常基本的测试以找到解决方案:)）。显示 PDF 并不是真正的问题。真正的问题是，它看起来像 bootstrap 将 pdf 对象放在模态或类似的东西后面（不太明白为什么它不显示它）
使用 iframe 的解决方案不起作用，我正在尝试专门使用对象标签（我不能在项目中使用 iframe）。我设法使它与 jqueryUI 对话框（jsfiddle.net/mV6jJ/8）一起工作，但与引导程序的模式不同。
好吧，在这种情况下，您是否在 firefox 28 或 chrome 34 上尝试过，以防万一？因为在我看来，除了 IE App 之外，您的每个示例都可以正常工作，但在桌面版本中它可以工作

【解决方案3】：

终于找到解决办法了：）是我的浏览器pdf阅读器配置不好。 Firefox 使用 Adobe Reader 来显示 pdf。我用 pdf.js（Firefox 的 pdf 阅读器）替换了它，现在一切似乎都运行良好 :) 非常感谢您的时间和帮助 :)

【讨论】：