Question

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

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

我不想只告诉我的客户“它无法完成”。我想知道为什么不能这样做的技术解释。

如果有人知道如何使其发挥作用，那就更好了！

Answer 1

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

通过检查默认安装路径允许站点检测操作系统

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

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

Answer 2

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

也许您可以使用HTML5 localstorage将文件上传到＆＃34; safe＆＃34; location（＆＃34; safe＆＃34;就浏览器而言）。

PDFJS.getDocument()支持＆＃34;一个类型化数组（Uint8Array）已经填充了数据或参数对象。＆＃34;因此，上传到本地存储，从那里获取文档作为字节，然后将其传递给pdf.js。

相关：

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

Answer 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，那么这将允许用户选择该文件，一旦选中该文件，它就会将其加载到{{1} }作为base64编码的数据URI。

示例here。

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

3 个答案: