<object> 带有 pdf 的标签在 firefox 中不起作用并且在 IE 中被弄乱了

Posted 2023-03-05

【中文标题】<object> 带有 pdf 的标签在 firefox 中不起作用并且在 IE 中被弄乱了

【英文标题】：<object> tag with pdf doesn't work in firefox and is messed up in IE

【发布时间】：2014-04-27 09:00:46

【问题描述】：

我的对象标签看起来像这样：

<div id="embeddedPdfContainer"><object data="<c:url value="/download-pdf/$id "/>" id="embeddedPdf"    type="application/pdf"></object></div>

在 chrome 中，这个标签按我想要的方式工作。在 Firefox 中它根本不起作用，在 IE 中它搞砸了。这是album，每个浏览器都有屏幕截图。我在这里有什么选择？

在 firefox 上，我发现这个 pdf 不适用于默认的 firefox 的 pdf 查看器。当我选择对 pdf 文档使用 adobe acrobat 扩展时，它可以完美运行。

【问题讨论】：

你使用的是正确的 DOCTYPE

您能否尝试将您的 pdf 加载到您的一个 PDF 的硬编码路径中？我的意思是，没有<c:url /> 标签（顺便说一下，这个标签是什么，你自己的命名空间？）

你确定使用你的引号"<c:url value="/download-pdf/$id "/>"

@Bigood 是的，我已经尝试硬编码 pdf 的位置，仍然是同样的问题。

@Marijus 请提供您的浏览器版本 - 并删除与对象标签关联的任何样式，然后重试（我在 FF 和 Chrome 下尝试了硬编码的 pdf 并且没有样式，效果很好）

【参考方案1】：

您可以像这样直接将pdf的链接写入数据属性：

<div id="embeddedPdfContainer"><object data="/download-pdf/some.pdf" id="embeddedPdf"     type="application/pdf"></object></div>

我用 Chrome 和 Internet Explorer（不同版本）对其进行了测试，它可以工作

如果您想保留 c:url 选项，您应该将第二个 " 更改为 '

所以改变这个：

"<c:url value="/download-pdf/$id "/>"

进入这个：

 "<c:url value='/download-pdf/$id '/>"

为了不“转义”字符串

【参考方案2】：

当您提供可疑的 html 时：

<div id="embeddedPdfContainer"><object data="<c:url value="/download-pdf/$id "/>" id="embeddedPdf"    type="application/pdf"></object></div>
                                            ^      ^
                                            |      |
                                          Start   End?

...浏览器试图弄清楚您的想法，其成功程度取决于它们实现的算法以及网站管理员的想象力。不同的浏览器不能总是就如何处理有效代码（有明确的规则和规范）达成一致，因此可以预期不一致的程度会随着无效代码的增加而增加。

恕我直言，获得跨浏览器兼容性的最简单途径是生成有效代码。作为帮助，您可以使用 on-line W3C HTML validator 或您的 IDE 提供的任何等效工具。

【讨论】：

那是一个标签库，这不是呈现的 HTML...耻辱 OP 发布了“中间图片”而不是最终结果，但最终它将在有效的 HTML 中解决.

当面对无效的底层 HTML 时，我猜大多数模板引擎要么抛出致命错误，要么进行简单的搜索和替换。虽然提供赏金来发现单行中不匹配的引号很奇怪，但 OP 对代码语法的明显贡献让我相信任何事情。

大声笑，很好！我也想要这种社区赏金:)

其实我也不知道为什么我得了100分。我不熟悉规则。

因为 OP 在赏金期结束时没有奖励任何人，这是在赏金之后开始的答案，不是赏金者写的，至少有 2 个赞成票，并且在其他人之间分数相同，这是最旧的：What is automatic awarding?

【参考方案3】：

您的 jsp 代码在语法上似乎是正确的，但我们无法知道生成的代码是否有意义。与其编写jsp代码，不如编写生成的html代码及其相关的css代码。

无论如何，关于 Firefox 的问题，我认为是由于这个 Firefox 错误： https://bugzilla.mozilla.org/show_bug.cgi?id=937663

最新版本（Firefox 28）似乎仍然受到影响，也许下一个版本会修复它。

关于资源管理器问题，可能是由于页面呈现的差异。编写特定于 IE 的 ccs 代码将解决此问题。

【参考方案4】：

我想知道这适用于任何浏览器！

c:url 是 JSP 标准标记库 (JSTL) 的一部分。要使用 JSTL 核心标签，您至少应该在 JSP 页面中包含：

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>

接下来就是PDF格式也不是HTML（格式）！ PDF 文件的处理很大程度上取决于用户的系统设置和配置。

任何浏览器都需要一个（集成的）插件来显示 PDF 文件！ 参见例如这个问题在这里：Embed Pdf in html5

如您所见，embed 元素通常与type="application/pdf" 的类型属性一起使用。

但这也远非理想，并且不适用于所有浏览器！

我有什么选择？

如上述链接问题的已接受答案中所述，您应该“将 PDF 转换为 HTML5 并嵌入 HTML5 版本。”

【参考方案5】：

首先c:url 标签与浏览器端的行为无关。标签应该被服务器重写并且浏览器应该收到一个绝对路径。 （也许您可以从浏览器发布源代码？）

所以问题只是<object>中嵌入的PDF的浏览器兼容性。大多数现代浏览器都应该使用这个标签，包括 Firefox，所以你应该检查你的 Firefox 上是否正确安装了 pdf 插件。

对于IE的问题，你没有提到你使用的是哪个版本，所以可以使用<embed>而不是<object>来解决这个问题。根据this answer，您可以尝试这种风格以获得更好的兼容性：

<object data="abc.pdf" type="application/pdf">
    <embed src="abc.pdf" type="application/pdf" />
</object>

【参考方案6】：

在<iframe> 或<object> 中使用外部查看器（更像https://docs.google.com/viewer）会有所帮助吗？ 这是一种妥协，因为您不能更改访问者浏览器的配置来添加/加载额外的插件。

对于样式部分，您可以将display:block设置为<iframe>或<object>，设置大小和margin。

---

<edit>这不是问题</> 你确定使用你的报价和这部分吗？ "<c:url value="/download-pdf/$id "/>"

您将价值和数据包装在一起

【讨论】：

GCyrillus，我试过去掉引号，还是一样。

好的，你能显示生成的HTML吗（从浏览器菜单查看源代码）

好的，对象的格式似乎很好，您的下载链接有效吗？如果您没有看到它，请将其从对象中删除，以测试 pdf 是否位于其应有的位置并返回正确的 mime 类型

GCyrillus，是的，下载链接可以正常工作，它可以下载我的 pdf。

它建议作为文件下载还是建议用 pdf 阅读器打开它（你知道哪些 mime 类型是通过 http 标头发送的吗？）