内联PDF预览

[Alon1 (Alon)]

试过了，将 cors origins 设置为 https://xxxxx.s3.us-east-2.amazonaws.com
并且在 /var/discourse/containers/app.yml 中设置了 DISCOURSE_ENABLE_CORS: true
但它仍然不起作用。

[tobiaseigen]

你是否在修改 app.yml 后执行了 ./launcher rebuild app？你可能还需要进行浏览器强制刷新。

[tobiaseigen]

顺便说一句，您可以检查管理员设置中的文件部分，看看您是否更改了影响此功能的设置。另外，如果您链接到托管在另一台服务器上的 PDF，我认为此功能可能无法正常工作。我刚刚在我的网站上对此进行了测试，同样远程提供的 PDF 也无法显示预览。

如果您找到问题根源，请告知我们！

远程文件不起作用但本地上传文件起作用的帖子的示例 markdown。

remote:

[test remote pdf](https://jsoncompare.org/LearningContainer/SampleFiles/PDF/sample-pdf-with-images.pdf)

uploaded locally:

[sample-pdf-with-images.pdf|attachment](upload://uOJLgHidEXnbqPRn2p6yP10ecQU.pdf) (3.8 MB)

效果图：

[Alon1 (Alon)]

@tobiaseigen

在更改了 app.yml 后，你是否运行了 ./launcher rebuild app？你可能还需要进行浏览器硬刷新。

是的，但没有成功。

当你在 Discourse 中启用 S3 时

那么根据定义，文件将存储在不同的域上。
我猜这解决了问题。但我仍然希望该插件能够支持已启用 S3 的 Discourse 安装。

[tobiaseigen]

我对这个配置不太熟悉。您是按照这些说明进行的吗？

Configure an S3 compatible object storage provider for uploads

This topic covers how to configure some common S3 compatible Object Storage providers (S3 clones). See Set up file and image uploads to S3 for more details about Amazon AWS S3 configuration, which is officially supported and used internally by Discourse for our hosting services. Provider Service Name Works with Discourse? Amazon AWS S3 Yes Digital Ocean Spaces Yes Linode Object Storage Yes Google Cloud Storage Yes Scaleway Object Storage Yes Vultr Obj…

[Alon1 (Alon)]

是的，在过去的几年里，我一直能够正常使用 S3（以及相关的“安全媒体”设置）。
只有内联 PDF 组件在此设置下无法正常工作。

供参考，即使将 app.yml 设置为：

DISCOURSE_ENABLE_CORS: true
DISCOURSE_CORS_ORIGIN: ‘*’

也没有帮助。

[nathank (Nathan Kershaw)]

@Alon1

是的，我几年前就开始使用 S3（以及相关的“安全媒体”设置），一直没有问题。

我也遇到了完全相同的问题，最后不得不将 S3 上传反转过来才能让这个 TC 按预期工作，因为它对我们来说价值很高：

Inline PDF Previews

Ok - I’ve made progress. Disabling S3 uploads fixes it for new uploads. But I’m left with a S3 / local mess if I go down that road! If could be that I am not using the CDN thingo (CloudFront) which throws up the annoying errors on the admin page. I’ll have a crack setting that up and see if that works. later - nope, a CDN makes no difference. much later - have removed S3 uploads successfully (with a bit of sweat) so all good now. Now, I’m keen to improve it! Is any clever person with the sk…

我真的认为，既然这是 official 并且 S3 上传是受鼓励的，那么应该看看是否能以某种方式使其与 S3 一起工作。有可能是 PDF 被特别排除了 S3 上传，但这会很糟糕，因为有些 PDF 非常大！

[Alon1 (Alon)]

@nathankershaw

我认为，既然这是#official::tag，并且鼓励使用S3上传，那么应该研究一下如何使其以某种方式与S3配合使用。

我认为没有人会不同意。
我猜这与意识和优先级有关。
至少在“意识”方面，也许@Johani（发帖人）可以在这个讨论的主题中添加一个小注释，说明内联PDF组件无法与启用了S3的功能一起使用。
这将为其他人节省故障排除的时间，并提高对该问题的认识。

[JammyDodger]

这些帖子中有一些关于S3的信息，如果它们有帮助的话，我从自动计时器中捞出来的？

@travelvc

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

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

@Ed_Bobkov

需要补充的是，如果你在错误消息中看到这段文字 来自源 'https://lounge.travelmassive.com' 已被，其中你的域名末尾没有斜杠，那么在CORS配置中你也应该在末尾添加没有斜杠的域名，如下所示：
https://mydiscourse.url

[Alon1 (Alon)]

是的，这可行
供以后需要的人参考：

1. 转到 AWS 控制台存储桶 https://s3.console.aws.amazon.com/s3/buckets 并选择用于 Discourse 安装的存储桶

2. 选择“权限”选项卡
   

3. 向下滚动到“跨源资源共享 (CORS)”并写入：

[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "GET"
        ],
        "AllowedOrigins": [
            "https://my-site.com"
        ],
        "ExposeHeaders": []
    }
]

应该看起来像这样：

[nathank (Nathan Kershaw)]

我真希望在我还在进行S3上传时就找到这个了！！

现在可能需要重新审视一下了。@JammyDodger，我想知道这些内容是否应该同时记录在S3和这个OP上，以免其他人遇到麻烦。

[JammyDodger]

@nathankershaw

现在可能需要重新审视一下。@JammyDodger，我想知道是否应该在 S3 和此 OP 上都注明这些内容，以免其他人在此处遇到麻烦。

当然。 我只是在等待一些确认它有效，然后才考虑如何最好地进行编辑。

[Ralf_Stockmann]

两个想法，解决同一个问题：Discourse 的视口相当窄，因此大多数 PDF 都太小而无法内联阅读。为了解决这个问题，我们可以：
a) 使 PDF iframe 可调整大小？我已经尝试过使用 CSS，但没有成功——底层的网格似乎挡住了路。
b) 在下载链接旁边提供第二个链接“在新标签页中打开”？我非常不愿意从我们的论坛下载太多东西。

[nathank (Nathan Kershaw)]

@Ralf_Stockmann

b) 除了下载链接之外，再提供一个“在新标签页中打开”的链接？我非常希望不要从我们的论坛下载太多东西。

这将是一个显著的改进！而且我认为添加起来应该不难。如果未来几天我有时间，可能会尝试为此提交一个 PR。

[tobiaseigen]

我认为 (b) 已经作为一个选项提供，例如“内联”或“在新标签页中打开”。也许可以增加第三个选项，让用户同时看到内联和在新标签页中打开？我也喜欢这个主意。

(a) 可能很难实现，因为在帖子中让内容看起来正确非常困难。

[Alon1 (Alon)]

我乐于见到工具栏上有一个展开按钮

，它可以让 PDF 全屏显示，而不是内联显示。

[denvergeeks]

@Ralf_Stockmann 和 @Alon1 你们试过……

IFrame Lightboxes

This is a theme component that adds the ability to open iFrames in lightboxes. Samples This component adds an “expand” button on top of the iframes you enable it on. [expand button] Clicking the button will open the iframe in fullscreen in a lightbox. [full screen iframe lightbox] Clicking either the dark area around the iframe or the x at the top right corner closes the lightbox. The same way it works for default image lightboxes. Settings There’s only one setting. You add the domains…

另外，在我的 Discourse 上，我使用了这种方法……

嵌入来自 Google Drive 的 PDF

（这是我首选的方法，因为 iFrame 中的 PDF 是响应式的 - 其他方法大多无法实现跨浏览器响应式。）

1. 分享
2. 复制分享链接
3. 在新标签页中打开分享链接
4. 点击右上角的三个垂直点
5. 选择“嵌入项目”
6. 复制显示的 iFrame 代码
7. 粘贴到 Discourse 编辑器中

此处嵌入了一个来自 Google Drive 的测试 PDF，你可以 \u003c\u003c在此处下载\u003e\u003e

\u003ciframe src=“https://drive.google.com/file/d/1KQ-jn7R0NmZxw955QaPu3lvLFh5zpnDe/preview” width=“640” height=“480” allow=“autoplay”\u003e\u003c/iframe\u003e

\u003ciframe src="https://drive.google.com/file/d/1KQ-jn7R0NmZxw955QaPu3lvLFh5zpnDe/preview" width="640" height="480" allow="autoplay"\u003e\u003c/iframe\u003e

看起来是这样的……（你也可以在我的网站 此处 实时尝试）

[Alon1 (Alon)]

太棒了！\n只需（1）安装 IFrame Lightboxes 主题组件，（2）将我自己的网站网址添加到组件设置中的“iframe 源域”列表中，即可！它会在 PDF 内联的右上角上方添加展开按钮\n

\n\n\n开箱即用

[thoka (Thomas Kalka)]

由于我仍然无法在新标签页中打开 PDF，因此我编写了一个小型插件，用于使用 content-disposition: inline 提供所有本地 PDF：

GitHub - thoka/discourse-send-pdf-inline: Patch discourse do serve PDFs inline