Question

我正在使用HTML5 File API来上传一些文档（.doc / .docx / .pdf）。我想在将文档上传到服务器之前显示该文档预览。有没有办法在客户端做这样的事情？

P.S。 Google文档查看器不正常，因为它需要可以从互联网访问文档。

Answer 1

我尝试创建一些示例，并在上传PDF文件之前显示PDF预览。

<!DOCTYPE html>
  <html lang="en">
    <head>
        <title>JavaScript PDF Viewer Demo</title>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
        <script type="text/javascript">
            function PreviewImage() {
                pdffile=document.getElementById("uploadPDF").files[0];
                pdffile_url=URL.createObjectURL(pdffile);
                $('#viewer').attr('src',pdffile_url);
            }
        </script>
    </head>
    <body>
        <input id="uploadPDF" type="file" name="myPDF"/>&nbsp;
        <input type="button" value="Preview" onclick="PreviewImage();" />

        <div style="clear:both">
           <iframe id="viewer" frameborder="0" scrolling="no" width="400" height="600"></iframe>
        </div>
    </body> 
</html>

Answer 2

没有。这是不可能的。

您希望浏览器查看不应该的数据文件。您有Office或PDF查看器（确定，已授予，PDF ssems现在位于浏览器内...）以查看您的数据文件。

如果要在浏览器中显示预览，则必须先将其上传并将其存储在“for-preview”目录中。确定后，将其移至最终目的地，否则，删除。

Answer 3

File API将允许您从文件中读取数据，但是您将无法解析并呈现它。 Mozilla发布了JavaScript PDF viewer，但我不知道MS Office文件的任何内容。

Answer 4

回到过去你可以做的事情：

<object data="word.doc">You do not have Word installed on your machine</object>

不确定是否仍然支持此功能，但如果是这样，您可以使用JS将该对象注入页面进行预览。

Answer 5

不确定是否有人仍在检查此帖子，但我想我会分享我的所作所为。无法直接显示预览，但您可以创建所选文件的blob对象。这样的东西（jQuery）：

$('#input').change(function (event) {
    var file = URL.createObjectURL(event.target.files[0]);
    $('element').append('<a href="' + file + '" target="_blank">' + event.target.files[0].name + '</a>');
});

此链接将打开一个新的浏览器选项卡并显示/下载该文件。这不是很漂亮，但它确实有效。这是一个例子：https://jsfiddle.net/j9gw023b/3/

Answer 6

Ajax上传你的文件，然后上传返回路径名并预览它。

blueimp的jQuery-File-Upload非常适合我。

你可以查看它的基本插件。

https://github.com/blueimp/jQuery-File-Upload/wiki/Basic-plugin

Answer 7

您可以使用pdf来实现，这是教程：

https://usefulangle.com/post/87/javascript-preview-pdf-during-upload

不知道doc / docx是否可能

Answer 8

您可以使用以下Web组件进行操作：https://avipunes.github.io/file-viewer/

内部的此Web组件使用一些Microsoft嵌入端点： https://view.officeapps.live.com/op/embed.aspx?src=${fileURI}

您可以在此处查看示例： https://view.officeapps.live.com/op/embed.aspx?src=https://file-examples-com.github.io/uploads/2017/02/file_example_XLS_10.xls

在上传到服务器之前预览.doc / .docx / .pdf文件

8 个答案: