内联PDF预览

主题组件
, ,
138

我有 3 个问题：

  1. 如何让所有人（无论是否登录）都能看到 PDF？

  2. 我可以显示来自外部 URL 的 PDF 吗？

  3. 为什么用户点击 PDF 链接时会自动下载而不是在 URL 中打开？

1 个赞
Can I use pdf.js to serve my site pdf uploads
139

有人在使用此组件配合 iframe lightboxes 时，仍然能看到 PDF 预览上方的“展开至全屏箭头”吗？

此图片显示了 PDF 查看器软件或网站中可用的选项，包括打开文件、添加注释或评论、访问设置或首选项以及可能与查看和操作 PDF 文档相关的其他功能的按钮或图标。（由 AI 标注）
此图片显示了 PDF 查看器软件或网站中可用的选项，包括打开文件、添加注释或评论、访问设置或首选项以及可能与查看和操作 PDF 文档相关的其他功能的按钮或图标。（由 AI 标注）150×100 2.47 KB

供参考，这在 2023 年还能正常工作……

1 个赞
140

不。它不可用。

2 个赞
141

老鼠——因为这将非常有帮助。

3 个赞
142

我们在网站上使用此 TC，并发现它非常有价值。今天，我创建并共享了一个包含 PDF 的主题，它产生了这样一个怪物：一个可以从展开中完全导航的内联 PDF。

CleanShot 2024-08-23 at 13.38.15@2x
CleanShot 2024-08-23 at 13.38.15@2x1352×1494 353 KB

1 个赞
143

是否有办法在选定的类别中启用此功能？我正在创建一个列出大量文件的主题，而 PDF 展开很不方便。我愿意接受一种手动阻止其触发的方法，例如插入特殊字符。

1 个赞
144

阻止什么触发？您希望 PDF 在选定类别中如何显示？

1 个赞
145

我想要一种阻止 PDF 内联显示的方法。在被阻止的情况下，PDF 将看起来像任何其他帖子附件。

146

作为简单的链接？还是作为Onebox？还是？

1 个赞
147

你只需要在 PDF 链接的名称前插入一个空格，就可以解决了。这并没有得到很好的文档说明（我刚刚处理了这个问题），但我设法在一段时间前将其添加到 TC 中，原因与你相同。

我更希望它能像 Oneboxes 一样处理——即在 Markdown 中链接前加一个空格，但这已经足够好了。

7 个赞
148

你好

我的插件出现了这个错误。

你知道是什么原因吗？

The image shows a screenshot of a webpage with the title "Test d'un pdf en visibilité" and a large, empty gray box. (Captioned by AI)
The image shows a screenshot of a webpage with the title "Test d'un pdf en visibilité" and a large, empty gray box. (Captioned by AI)923×827 26.7 KB

https://forums.ffjdr.org/t/test-dun-pdf-en-visibilite/2691

1 个赞
149

是所有 PDF 都会这样，还是只有这一个？

您是否尝试将论坛的域名添加到“允许的内部主机”中？

2 个赞
150

是的，所有PDF都一样。

我刚把它添加到“内部主机”中……没有改善。

感谢您的建议 :slight_smile:

另外，我在Chrome控制台中发现了这个错误消息：

initialize-for-pdf-preview.js:84 因违反以下内容安全策略指令而拒绝为“blob:https://forums.ffjdr.org/79cf20bf-65ac-460f-b0b0-73c10bf85890”进行框架设置：“default-src ‘self’ data: https:”。请注意，“frame-src”未显式设置，因此“default-src”被用作后备。

不允许加载本地资源：blob:https://forums.ffjdr.org/79cf20bf-65ac-460f-b0b0-73c10bf85890

2 个赞
151

检查你的 allowed onebox iframes，它应该是 *。

3 个赞
152

我刚安装了这个组件。以下是我安装它的步骤。我的环境是 S3（Digital Ocean Spaces）和 CDN（Bunny.net）。

使用 Chrome 开发者工具栏（F12）将极大地帮助您完成此设置。点击网络选项卡以验证 PDF 是否被 CORS 阻止。

Digital Ocean 配置。

  1. 转到您的 Spaces 设置并点击添加 CORS 配置
  2. 设置：
Origin:   您的 discourse URL - 使用完整的 https://discourse.url
Allowed Methods:  GET 和 HEAD
添加以下标头：
      Access-Control-Allow-Methods
      Access-Control-Allow-Origin
      Origin
      Range
Access Control Max Age: 0

  1. 我的屏幕看起来像这样：

    此图像显示了一个 API 文档界面，其中勾选了“GET”和“HEAD”方法，启用了“Access-Control-Allow-Methods”和“Access-Control-Allow-Origin”标头，并在“Access Control Max Age”字段中填入了“0”。（由 AI 题注）
    此图像显示了一个 API 文档界面，其中勾选了“GET”和“HEAD”方法，启用了“Access-Control-Allow-Methods”和“Access-Control-Allow-Origin”标头，并在“Access Control Max Age”字段中填入了“0”。（由 AI 题注）599×543 16.5 KB

  2. 保存并通过主屏幕进行验证。

CDN（Bunny.net）配置

我不得不告诉 CDN 为文件类型 *.pdf 提供 CORS 标头

  1. 选择您的 CDN 并查找标头选项。
  2. 打开“添加 CORS 标头”
  3. 将 PDF 添加到文件扩展名
  4. 保存。

完成这两个设置后，一切都运行得很顺利。

您可能有不同的工具集，但这可能会帮助您排除故障/解决您可能遇到的任何问题。

1 个赞
153

我指的是为内联PDF添加一个额外的“在新标签页中打开”选项。我想@nathank一直没找到时间？

这对于我们来说仍然是一个紧迫的问题，因为我们使用Discourse作为企业内部网。

1 个赞
154

我变得很忙，而且我最多是个业余爱好者，这会花我很多时间。然后就继续了……

在 Feature 中阐述它，甚至考虑付费请开发人员为其做一个 PR，可能会有帮助。

2 个赞
155

我在浏览器的开发者控制台中收到了关于这个很棒的主题组件的弃用通知：

[THEME 30 ‘PDF 预览’] 弃用通知：在站点初始化期间访问 site.mobileView 或 site.desktopView 可能会在浏览器窗口大小调整时导致错误和不一致。请将这些检查移至在页面渲染期间执行的组件、转换器或 API 回调。 [已弃用于 Discourse 3.5.0.beta9-dev] [弃用 ID：discourse.static-viewport-initialization] [信息：Designing for Different Devices (Viewport Size, Touch/Hover, etc.)]

3 个赞
156

我已经在我的PR中处理了上述弃用通知，相关功能请求位于此处，该请求改进了PDF链接的行为，使其始终在新标签页中打开——这解决了主题中提到的几个问题。

简而言之，这意味着在移动设备上现在可以一键访问PDF内容（之前需要多次点击/等待等），同时在桌面环境下如果需要，也能实现类似效果。

虽然将修复和新功能结合在一起有点“不规范”，但我需要修改移动设备的检测方式来改变行为。

5 个赞
157

桌面端是否仍然支持内联 PDF 预览？