为什么可以't我在我的网站上嵌入了一个来自本地机器的PDF

Why can't I embed a PDF from my local machine on my website?

本文关键字：一个 PDF 机器 网站 我的 为什么      更新时间：2023-09-26

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

根据知识产权法，我们的客户不能接受这一点。他们希望在不上传到我们的服务器的情况下嵌入PDF文件。因此，它必须直接从用户的机器上加载。我发现这是做不到的。我尝试过的所有插件都需要一个虚拟url，不会接受物理url(file:///local/path/file.pdf)。

我不想只是告诉我的客户"这是不可能的"。我想知道为什么不能这样做的技术解释。

如果有人知道如何让它发挥作用，那会更好！

这是一个安全策略。其防范的问题包括：

  • 允许站点通过检查默认安装路径来检测您的操作系统
  • 允许站点利用系统漏洞（例如，Windows 95/98中的C:''con''con）
  • 允许网站检测浏览器首选项或读取敏感数据

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

也许你可以使用HTML5本地存储将文件上传到一个"安全"的位置（就浏览器而言是"安全的"）。

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

相关：

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

如果浏览器支持，可能能够做到这一点。看看FileReader对象。如果用户的浏览器支持，则可以允许用户选择一个文件并在代码中引用该文件。像这样的东西在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中。

此处为示例。

相关文章：