内联 PDF 预览

:discourse2: 摘要 Inline PDF Previews 是一个仅限桌面端使用的主题组件,允许您为 PDF 附件创建预览。
:eyeglasses: 预览 在 Discourse 主题创建器上预览(仅限桌面端)
:hammer_and_wrench: 仓库链接 https://github.com/discourse/discourse-pdf-previews
:open_book: Discourse 主题新手? Discourse 主题使用入门指南

安装此主题组件

功能

之前

之后

如上所述,此组件仅在桌面端有效。在移动设备上显示预览几乎没有好处,因为所有内容都会非常小且难以阅读。

此组件使用浏览器的原生实现来渲染 PDF,因此结果在不同浏览器上可能看起来不同。

另外,请注意 Discourse 默认不允许上传 PDF。如果您希望允许用户上传 PDF 文件,则需要将 pdf 扩展名添加到 authorized_extensions(如果您希望所有用户都能上传 PDF),或者 authorized_extensions_for_staff(如果您希望仅限制为工作人员)。

:information_source: 如果使用 S3,您可能还需要更新您的 CORS 策略。请参阅以下帖子:Inline PDF Previews - #106 by JammyDodger

如何使用?

  1. 安装该组件
  2. 允许上传 PDF
  3. 刷新页面
  4. 上传 PDF

就是这样。其余部分应自动工作。

设置

名称 描述
预览模式 内联: PDF 附件将在帖子内内联渲染

新标签页: PDF 附件链接将使用户进入一个新标签页,并在其中渲染 PDF

其他功能

如果您希望单个 PDF 以内联方式显示,只需在文件名前添加一个空格即可,例如:

这将以内联方式显示

[sample-pdf.pdf|attachment](upload://usvbcKiQSWqA3w10gnf5PtydiXR.pdf) (82.9 KB)

这将以内联方式显示

[ sample-pdf.pdf|attachment](upload://usvbcKiQSWqA3w10gnf5PtydiXR.pdf) (82.9 KB)

:discourse2: 由我们托管? 主题组件在我们的 Standard、Business 和 Enterprise 计划中均可使用。

68 个赞

我在 S3 上托管我的上传文件和图片,但预览被“CORS 策略:缺少 ‘Access-Control-Allow-Origin’ 响应头”阻止。

以下是 Chrome 控制台的输出:

对 'https://travelmassive-discourse-cdn.s3.dualstack.us-west-1.amazonaws.com/original/2X/b/b578f6364592121964e6a2fd4969e5c1222bd909.pdf'(从 'https://lounge.travelmassive.com/uploads/short-url/pTnA3r043WfhDK8HSdPQrtNn8Lf.pdf' 重定向)的 fetch 访问已被 CORS 策略阻止:请求的资源上不存在 'Access-Control-Allow-Origin' 响应头。如果透明响应能满足您的需求,请将请求的 mode 设置为 'no-cors',以在禁用 CORS 的情况下获取该资源。

更新

我通过在 S3 存储桶配置中添加以下 CORS 策略解决了此问题。

<CORSConfiguration>
 <CORSRule>
   <AllowedOrigin>https://mydiscourse.url/</AllowedOrigin>
   <AllowedMethod>GET</AllowedMethod>
   <AllowedHeader>*</AllowedHeader>
   <ExposeHeader>Access-Control-Allow-Origin</ExposeHeader>
 </CORSRule>
</CORSConfiguration>
2 个赞

需要补充说明的是,如果您在错误消息中看到如下文本:from origin 'https://lounge.travelmassive.com' has been,且您的域名末尾没有斜杠 /,那么在 CORS 配置中也应同样添加不带末尾斜杠的域名,如下所示:
https://mydiscourse.url

1 个赞

我注意到您的上传文件位于 AWS 上,因此问题很可能与 CORS 有关(该组件在您网站上未激活,我无法确认)。请查看您下方的帖子。

感谢您分享这些信息!

请注意,此问题仅会影响已设置类似 S3 的自托管用户。未使用 S3 的自托管用户不会遇到此问题。由 CDCK 托管的客户也无需担心,因为他们已经完成了相关配置。

话虽如此,CORS 配置已略微超出本主题的范围。如果您的上传存储桶不允许访问您的域名,那么无论出于何种原因都需要修复此问题,因为这可能会引发其他问题。

我有点不确定这里发生了什么。每次尝试时,这两种情况似乎都能正常工作。我们可以将其归结为暂时性的网络问题,但如果您再次遇到此问题,请随时告诉我 :+1:

我已为此组件推送了一个微小的更新,以改善加载体验。现在,在文件加载期间会显示一个基于主题颜色的占位符,而不是默认的浏览器 Iframe 样式。该占位符仅在文件加载时显示,因此 99% 的情况下,您甚至不会注意到它。

鉴于大多数 PDF 文件会瞬间加载,我觉得添加一个加载旋转图标并不值得。

9 个赞

是否可以通过在上传链接前添加一个空格来抑制 PDF 预览,就像一框链接那样?有时您需要的是文档列表而非预览,而有时您又需要预览。

9 个赞

我在 macOS Catalina 的 Safari 浏览器上,没有禁用浏览器内 PDF 显示的设置——例如,http://www.orimi.com/pdf-test.pdf 可以正常显示。但我在主题创建器中查看预览时,仍然会弹出“已阻止的插件”窗口或消息。

Safari 偏好设置中的网站特定设置与其他网站并无不同。

其他人也遇到这种情况吗?

3 个赞

在 macOS Big Sur 的 Safari 上对我仍然无法工作。博客插件没有特殊设置,其他 PDF 文件可以在浏览器中正常显示。

在 theme-creator 中加载预览页面时,Safari Web Inspector 报告了以下问题:
未识别的内容安全策略(Content-Security-Policy)指令 'worker-src'。
拒绝加载 blob:https://theme-creator.discourse.org/7b9b62c7-e782-4080-a521-04e3b06aa142,因为它未出现在内容安全策略的 object-src 指令中。

3 个赞

这将是该组件的巨大改进!@Johani,这可行吗?

5 个赞

我在 Firefox 上也遇到了同样的问题,但仅在第二次访问时出现 :wink:
有什么解决方法吗?是否需要在 CSP 配置中手动声明?

谢谢

1 个赞

我的网站上这个功能停止工作了。我看到的不是 PDF 预览,而是一个大的黑色方框:

通过安全模式禁用插件没有任何效果,移除所有其他主题组件也是如此。

这个问题是在将图片和文件上传迁移到 S3 后出现的,这可能是罪魁祸首。我希望不是这样,因为很难将它们移回去!

我束手无策了。真可惜,这本来是一个很棒的功能组件。有什么建议吗?

2 个赞

我在启用 S3 上传时也遇到了相同的行为。

3 个赞

您仍然可以下载 PDF 吗?
对我这边来说仍然正常(s3 + 安全媒体,且未使用 CDN):thinking:

1 个赞

是的,我们可以。我们的设置和您一样(我想)。

1 个赞

:thinking:

  • 我消息中的链接格式为 domain/secure-media-uploads/meta/original/...
  • 但在控制台/网络面板中,我可以看到实际下载来自存储桶
    你看到 Amazon 凭证了吗?

如果没有,也许这会有所帮助?

我还记得,当我尝试将帖子从一个分类移动到另一个(或者是复制/粘贴?)时,出现了一些奇怪的问题。最终,当我重新上传文件后,问题就解决了。

1 个赞

我在全新的 Discourse 安装和全新的 PDF 附件上也遇到了同样的问题。

3 个赞

谢谢 @Benjamin_D。原来是我没有启用安全上传,我的链接看起来都很正常且能正常工作,比如这个:

所以我完全摸不着头脑——尤其是为什么在我运营的两个论坛里能正常工作,而另一个却不行——唯一的区别就是 S3。而且你那边用 S3 也能正常工作。我真的非常困惑。

1 个赞

更新到 Discourse 最新版本后,PDF 附件不再显示。可能是什么问题?

1 个赞

这可能是与其他组件或主题存在冲突。对我来说,它按预期运行。请先禁用其他组件,如果您的主题不同,请尝试使用默认主题。插件也是如此。

3 个赞

好的——我取得了一些进展。禁用 S3 上传解决了新上传的问题。但如果我走这条路,就会留下一个 S3 和本地存储混杂的烂摊子!

可能是我没有使用 CDN 那个东西(CloudFront),导致在管理页面出现烦人的错误。我打算试着设置一下,看看是否有效。

稍后——不行,CDN 没有任何作用。

很久以后——已经成功移除了 S3 上传(费了点劲),现在一切正常。

现在,我想进一步优化它!有没有哪位有相关技能的高手感兴趣来试一试?

4 个赞

我正在寻找一个插件,允许在新标签页中打开 PDF。
我目前的 Discourse 设置仅允许下载。
是否可以通过类似的插件实现这一功能?

5 个赞