为什么我不能在我的网站上嵌入本地机器上的 PDF？答案

【问题标题】：Why can't I embed a PDF from my local machine on my website?为什么我不能在我的网站上嵌入本地机器上的 PDF？
【发布时间】：2015-03-06 09:13:56
【问题描述】：

我正在开发一个用户可以解决模拟考试的网站。我的客户希望在带有 PDF 查看器的考试旁边包含一个 div。这个想法是用户可以从他的本地机器中选择一个 PDF 文件，并将其加载到考试旁边的 PDF 查看器中。我使用 pdf.js 和 pdfobject 使它工作。问题是这两个选项都需要将 PDF 文件上传到我们的服务器。

根据知识产权法，我们的客户无法接受。他们希望嵌入 PDF 文件而不将其上传到我们的服务器。所以它必须直接从用户的机器上加载。我发现做不到。我尝试的所有插件都需要一个虚拟 url，并且不接受物理的（file:///local/path/file.pdf）。

我不想只是告诉我的客户“这不可能”。我想知道为什么不能完成的技术解释。

如果有人知道让它工作的方法会更好！

【问题讨论】：

标签： javascript pdf embedding

【解决方案1】：

这是security policy。它防御的问题包括：

允许网站通过检查默认安装路径来检测您的操作系统

允许网站利用系统漏洞（例如，Windows 95/98 中的 C:\con\con）

允许网站检测浏览器偏好或读取敏感数据

【讨论】：

【解决方案2】：

尝试将其加载到 <iframe> 中，PDF 的 URL 为 src。但它可能会因为客户端浏览器的安全策略而失败。所以这充其量是脆弱的。

也许您可以使用HTML5 localstorage 将文件上传到“安全”位置（就浏览器而言“安全”）。

PDFJS.getDocument() 支持“类型化数组 (Uint8Array) 已经填充了数据或参数对象。”所以上传到本地存储，从那里以字节形式获取文档，然后将其传递给 pdf.js。

相关：

https://hacks.mozilla.org/2012/02/saving-images-and-files-in-localstorage/

【讨论】：

【解决方案3】：

如果浏览器支持，您可能可以这样做。看看FileReader object。如果用户的浏览器支持，您可以允许用户选择一个文件并在代码中引用该文件。像这样的东西在 Firefox 中对我有用：

$('input[type=file]').change(function () {
    if (window.FileReader) {
        var input = this;
        if (input.files && input.files[0]) {
            var reader = new FileReader();
            reader.onload = function (e) {
                $(input).next('iframe').attr('src', e.target.result);
            }
            reader.readAsDataURL(input.files[0]);
        }
    }
});

因此，如果您有一个input type="file" 后跟一个iframe，那么这将允许用户选择文件，一旦选择它，它将作为base64 编码的数据URI 将其加载到iframe。

例如here。

【讨论】：