javascript - 如何将大文件(pdf)存储到浏览器文件系统中

Question

背景:

我已经构建了一个离线 HTML5 应用程序，它使用 pouchdb 将一些数据存储到本地浏览器数据库中。

现在要求已经改变，我必须将大型 pdf 文档(大约 200 个，每个大小为 5mb - 8mb)存储到本地浏览器中，以便用户可以在需要时离线查看。

问题:我认为使用 pouchdb 将从服务器接收的这些大型文档放入我的浏览器数据库中不是一个好主意。

我想知道是否有办法将这些文档以某种方式放入我的设备，然后获取指向本地设备内位置的 url 引用？。

Answer 1

将 PDF 包含在您的离线 list 中，以便它们与应用程序的其余部分一起缓存。然后你只需使用你的普通 URL 来引用它，它就会从离线应用程序缓存中得到满足。

---

在下面回答你的问题:

When the application is loaded in the browser then i store the details of the associated pages into the browser via a manifest file. And when the user clicks on a 'SYNC' button then I communicate with the server and fetches all the pdfs associated with the user. If I have to persist these pdfs using the manifest then how can I do it ?.....the manifest is already stored

我们做类似事情的方式是这样的:我们有单独的页面来存放用户离线的东西(例如，一天的约会值(value))，以及一个完全由列出这些内容的客户端数据驱动的列表页面页。这是它的工作原理:

当用户想要离线查看他们正在查看的内容时，他们单击一个按钮，该按钮会打开一个 URL，其中包含告诉服务器他们想要什么的信息(例如，example.com/offline/stuff-saying-what-they-want-here/)，服务器会生成一个页面嵌入其中的数据以及页面 list 及其所需的任何 Assets 。所以在那个时候，该信息可以在该 URL 上离线使用。加载时，该页面将自身注册到 localStorage 中的列表中，给出页面及其 URL 的描述。

列表页面(例如 example.com/offline/list/)有自己的 list 和 Assets ，不会经常更改，因为它完全由 localStorage 驱动信息。它显示了他们离线的事物列表以及指向它们的链接。这主要是为了方便用户，以防他们忘记为离线的个别事物添加书签；例如，他们的想法是他们会为列表添加一次书签，而不必担心为单个页面添加书签。 (他们可以去搜索他们的历史，但这很痛苦。)列表页面通过从 localStorage 获取已知页面列表来保持自身最新。当它加载并订阅 storage 时事件，因此如果您在列表打开时在其他选项卡中加载其他页面，它会看到它们到达并更新其列表。

因此，在对您的应用程序一无所知的情况下，听起来您的主页可能类似于或列表页面，并且单击“同步”可以打开 PDF 页面，即时生成 list ，并且该页面可以注册localStorage 中的 PDF我们处理离线页面的方式，以便主页可以正确显示它们的状态。

显然，实际的应用程序缓存和我们的 localStorage 都有潜力列表不同步；如果用户清除应用程序缓存(这会使我们列出无法真正离线查看的内容)或清除 localStorage，我们将无能为力。 (这不会列出他们可以离线查看的内容)，但我们已经做到了。用户大多不会那样做，只是经常那样做。

在未来，您将通过 service workers 获得更多 的粒度和控制力, 但现在因为 service worker support is very thin on the ground so far ，我们受困于 appcache 及其定义离线 Assets 的相当乏味的方式。