内联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 个赞