23

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

PS Google Docs Viewer 不行，因为它需要可以从 Internet 访问文档。

4

8 回答 8

30

我试图创建一个小例子，在上传 PDF 文件之前会显示 PDF Preview。

<!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>
于 2014-01-09T10:37:20.173 回答
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/

于 2018-01-10T11:56:36.850 回答
4

不，这是不可能的。

您希望浏览器查看它不应该查看的数据文件。您有 Office 或 PDF 查看器（好的，已授予，PDF ssem 现在可以在浏览器中...）来查看您的数据文件。

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

于 2013-06-27T13:39:48.703 回答
3

File API将允许您从文件中读取数据，但是您会遇到解析和渲染它的麻烦。Mozilla 发布了一个JavaScript PDF 查看器，但我对 MS Office 文件一无所知。

于 2013-06-27T13:42:24.763 回答
2

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

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

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

于 2013-06-27T13:36:52.600 回答
1

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

blueimp 的 jQuery-File-Upload 对我来说非常棒。

您可以查看其基本插件。

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

于 2014-08-31T14:57:15.270 回答
0

你可以用pdf来做，这里是教程：

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

不知道 doc/docx 是否可行

于 2019-10-22T16:52:36.013 回答
0

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

这个网络组件在后台使用了一些微软嵌入端点： 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

于 2020-10-18T09:35:27.383 回答