如何使用 PDF.js 加载 Web 应用程序中包含的文件（不是来自“文件：”URL？答案

【问题标题】：How to use PDF.js to load file included in web app (not from "file:" URL?如何使用 PDF.js 加载 Web 应用程序中包含的文件（不是来自“文件：”URL？
【发布时间】：2013-07-16 14:33:54
【问题描述】：

我希望能够使用 PDF.js 在我的 Chrome 应用程序中显示 PDF 文件，但文档不存在。我一直找不到任何简单的示例或教程来显示从相对 URL 加载 PDF、显示页面和浏览 PDF 的代码。他们有非常复杂的示例，其中 95% 的代码执行其他操作，并且很难解析这些代码并找到相关函数。我想：

在我的应用程序中包含相关代码（这是由“node make generic”创建的“pdf.js”吗？还是我还需要包含其他 JS 文件？）
能够显示我的myapp.crx 文件中的 PDF 文件
pdf.js 是否需要“LocalStorage”？ localStorage 会继续在 Chrome 扩展程序/应用中使用还是被弃用？

有人能告诉我#2 是否可行，以及如何找到一些示例代码或文档，说明要调用的正确类/函数和要包含/构建的文件吗？

【问题讨论】：

标签： javascript google-chrome google-chrome-extension google-chrome-app pdf.js

【解决方案1】：

node make generic 输出到build/generic 目录。该目录包含两个子目录，“build”和“web”。
“build”包含“pdf.js”，它是实际的 PDF 引擎。
“web”包含一个查看器，类似于 http://mozilla.github.io/pdf.js/web/viewer.html 的查看器。
将之前的两个目录复制到您的应用后，您应该可以使用chrome.extensi/web/viewer.html?file=path%2Fto%3Ffile.pdf 加载 PDF 文件
PDF.js 不需要localStorage。如果可用于滚动位置等持久设置，则使用它，但如果不可用，则 PDF.just 在没有它的情况下继续工作。

但有一个重要问题：PDF.js 使用同步 XMLHttpRequest 加载本地化文件。这是 Chrome 应用程序中的not allowed。您可以通过序列化 locales 中的所有文件来解决此问题，将其放入单个 JavaScript 文件中，将其加载到 viewer.html 中，并简化 l10n.js 以从我刚刚描述的文件中读取翻译。

【讨论】：

感谢您的回复。你能多说一下序列化locales 中的所有文件是什么意思吗？据我所知，没有locales 文件夹。有一个l10n 文件夹，是这个意思吗？另外，如果我想制作自己的自定义查看器而不使用viewer.html，我还需要担心吗？本地化是pdf.js还是viewer.js使用的？
@DonRhummy 在build/generic/ 中有一个“语言环境”目录。如果您想使用自己的查看器，只需要pdf.js。你可以扔掉所有“网络”的东西..
我看到您对@SergeyShevchenko 的评论并想仔细检查：当我将网址传递给PDFDocument（或我需要实例化的任何类）时，我将其传递给path/to/file.pdf 而不是@987654341 @，对吗？
@DonRhummy 是的。仅当您通过查询字符串传递参数时才需要 URL 编码。参数解析的相关来源在here （如您所见，它是特定于viewer.js的；您说您使用的是自制查看器，因此该评论与您无关。）。
@DonRhummy 你可以通过chrome.runtime.getURL获取Chromium App中资源的绝对URL

【解决方案2】：

澄清一下：通常你应该能够通过在 CRX 的内部目录结构中提供相对或绝对路径来访问烘焙到 CRX 中的文件，例如：

'我的文件/pdfs/example.pdf'

对于 PDF.js，我想这就是上面 Rob 的回答中的“path-to-file.pdf”应该是逐字逐句的。

【讨论】：

path%2Fto%2Ffile.pdf 是path/to/file.pdf 的 URL 编码版本。不一定是相对网址，也可以是绝对网址，只要页面有访问该网址的权限即可。