内联 PDF 预览

您好,

我使用此组件已有一段时间,今天我发现嵌入的预览在页面上不再显示。

2.8.0.beta6

示例

1 个赞

在所有桌面浏览器中看起来都没问题:

5 个赞

这就是它在 iPad Safari 中的显示效果:

4 个赞

谢谢大家,

刚才又检查了一遍,Mac 上的 Safari 正常,Edge 也正常,但 Chrome 失败了。有意思。



4 个赞

如何在 Mac 上的 Safari 中允许使用此插件?该插件在其他浏览器上运行正常,但在 Safari 上会被阻止,即使我已在偏好设置/网站部分关闭了内容拦截器。是否还有其他需要关闭拦截器的地方?任何帮助都将不胜感激。

1 个赞

我确实不知道,所以这纯属浪费带宽,但 Safari 之前因为相当严格的内容安全策略(CSP)规则和其他安全问题而一直存在问题。不过,按理说这应该会导致所有 Safari 版本都出现问题,而不仅仅是 macOS 上的版本,我认为。

3 个赞

它在 Mac Safari 上对我有效。唯一对我无效的地方是 iPhone(Safari、FF 和 Chrome)。我最近没有在 iPad 上测试过。

3 个赞

由于苹果的限制,iOS/iPadOS 上的所有网页浏览器都使用完全相同的渲染引擎(WebKit),因此这实际上并不重要。

2 个赞

这是我在新款 MacBook Air 上看到的,Safari 版本 14.1.1

我肯定是某处的设置不正确……

3 个赞

尝试将 Safari 更新至最新版本。

2 个赞

我刚推送了一个新更新。

现在您可以禁用特定 PDF 文件的预览。它的实现方式与 oneboxes 不完全相同(因为这在主题组件中实现起来会相当复杂),但非常相似。

上传 PDF 时,编辑器默认会显示如下内容:

[file.pdf|attachment](upload://2cLML0SIwebGHDjlKRVzZ3VRv0f.pdf) (524.1 KB)

您只需在文件名前添加一个空格,如下所示:

[ file.pdf|attachment](upload://2cLML0SIwebGHDjlKRVzZ3VRv0f.pdf) (524.1 KB)

请注意,空格必须位于括号内。这不会影响下载时的文件名,也不会影响帖子中渲染的文件描述。

完成此操作后,处理后的帖子中将不再为该 PDF 附加预览。

此次更新添加了一个新设置。

它有两个选项:

Inline(内联)和 New Tab(新标签页)

如果您选择 Inline,PDF 预览将像以前一样在帖子中渲染。

如果您选择 New Tab,该组件将不会创建内联预览。但是,附件链接将在新标签页中打开。新标签页将在浏览器的原生阅读器中显示 PDF 文件。

此外,附件链接旁边的图标将从 download 变为 external-link。

该设置的默认值为 Inline。因此,它不会影响在此更新之前已安装此组件的网站。它仅添加了一个您需要手动切换的新选项。

有一些报告称此功能在 Safari 和部分 iOS 设备上无法正常工作——我尚未能复现此问题。此次更新尝试通过将 PDF 加载为 base64 URL 而非 blob 来解决该问题,因为据我了解,这在 Apple 设备上非常敏感。

请更新该组件,并确保您的浏览器也已更新。如果出于某种原因,它在您的 Apple 设备上无法工作,请在可能的情况下检查浏览器控制台,并告诉我您看到了什么。

10 个赞

自从更新到最新版本 2.8.0.beta6 (a1daf9fe53) 后,PDF 预览似乎加载速度稍慢,并且至少在一个案例中,帖子中的三份 PDF 文件有一份在 Chrome 中无法显示:

这不是缓存问题——即使在清除 Chrome 缓存、对 PDF 进行微小修改后重新上传,预览仍然无法显示。错误日志中没有任何条目。Chrome 已更新至最新版本。

控制台:

3 个赞

我使用的是 2.8.0.beta6 版本。PC - Windows 10。观察到类似的情况。Firefox 稍慢,但预览最终会加载。Chrome 无法显示,似乎卡在这个灰色占位符上。

4 个赞

感谢提供的详细信息。由于其中两份文件加载正常,我推测这可能与文件大小有关……结果确实如此。

如果我上传一个较大的 PDF 文件,它在 Firefox 中运行正常,但在 Chrome 中会失败。我查阅了一些相关资料,发现 Base64 URL 的长度限制主要由浏览器厂商决定。Firefox 没有限制,而 Chrome 将其限制在 2MB。

因此,这意味着 Base64 URL 不是一个可行的方案,我们需要改回使用 Blob URL。如果预览元素使用 <object> 标签而不是 iFrame,Safari 似乎有更好的支持。

因此,此 PR 将所有内容改回使用 Blob URL,并将标签更改为 <object>。这肯定能解决 Chrome 上大文件的问题,并希望能 :crossed_fingers: 修复苹果设备上的问题。

请再次更新组件,并告知我是否仍有问题。

3 个赞

包含 3 个 PDF 的帖子中的文件大小按从上到下的顺序分别为 548.3 KB、1.1 MB 和 1.6 MB。仅更新该组件后,预览图虽然显示出来了,但在 Chrome 中不再以全宽显示:

编辑:Firefox 的表现与上述 Chrome 相同,而 Safari 未显示预览图,而是显示灰色方框:

3 个赞

谢谢,我已推送了一个针对尺寸问题的小修复。

这可能无法解决 Safari 上的问题,但请尝试一下并告知结果。

3 个赞

是的——Chrome 和 Firefox 已修复,Safari 仍保持原样,仅显示灰色方框。

3 个赞

只是想确认一下,Safari 之前对您来说是可用的,对吧?

3 个赞

是的,直到最近的更新之前,所有桌面浏览器都能正常运行。由于 Safari 并非我的日常浏览器,我无法确定它之前能正常工作的具体时长,但我可以确认它在过去某个时间点曾正常运行过。

3 个赞

此提交应能修复 Safari 的问题。

FIX: previews are still broken on MacOS safari by hnb-ku · Pull Request #5 · discourse/discourse-pdf-previews · GitHub

我刚刚在 MacBook 上进行了测试,Safari、Chrome 和 Firefox 中均运行正常。

如果任何人遇到此问题:

那是您的环境配置问题,而非组件本身的问题。

How to unblock a blocked plug-in to displ… - Apple Community

此外,请注意,根据 Discourse 的定义,该组件从未支持在移动设备(包括 iOS 或 Android)上预览 PDF。因此,这是预期行为。

7 个赞