希望使用angularjs创建类似功能的gmail附件预览

时间:2015-05-08 11:34:54

标签: javascript angularjs user-interface preview user-experience

我有一个要求,我想向用户显示文件预览。

支持各种文件类型; .pdf,.xlsx,.doc,.rar,.jpeg,.png等等。

当用户点击预览时,它应该在弹出窗口中打开文件,向他显示文件的预览。用户可以放大,缩小,下载文件。就像你可以看到gmail的附件预览一样。

请,任何人都可以引导我访问任何相关的图书馆或有用的资源。

提前致谢

3 个答案:

答案 0 :(得分:6)

有两种主要方法可以做到这一点。

1)服务器端:将服务器端(文件上传时)的预览渲染为jpg / png图像,并将预览存储在服务器上。这是在客户端最容易实现的,但需要在服务器上额外存储。

2)客户端:渲染预览'直播'使用浏览器中的javascript,这减少了服务器必须执行/存储的数量,但确实要求客户端在内存中完全下载文件,然后才能呈现预览,这对于大文件可能是一个问题。此外,您可能需要为每个单独的文件类型包含javascript库,因为大多数库将针对一种特定的文件格式。

服务器端可能是推荐的方式。您在为Web服务器使用了什么?

答案 1 :(得分:1)

您正在考虑创建文档查看器。

相信我的大工作,因为浏览器不理解这些格式。浏览器可以直接在画布上渲染图像,但不知道如何渲染其他文件。因此,除了图像格式之外的任何文件,都需要将它们临时保存在服务器上,然后在浏览器上流式传输并使用相应的文件查看器显示它们。

您可以将doc和xlsx文件转换为pdf,并使用pdf viewer(http://ngmodules.org/modules/ng-pdfviewer)显示这些文件。互联网上有大量的文档转换器(但是您需要检查许可条款,因为大多数都是GPL许可,而且不能用于商业项目。)

如果你想保存这项工作,那么去第三方服务器那些采取所有绘画来转换html5中的文件,例如https://crocodoc.com/why-crocodoc/

您也可以尝试使用google doc viewer google doc veiwer

答案 2 :(得分:0)

这个问题相当广泛。我没有完成如何实现附件查看器指令的所有步骤,但这里有一些您可能会觉得有用的指针。

要允许用户下载文件,只需在某处下载链接即可。如果您在Amazon S3,Google云端存储或其他云存储服务上托管附件,请查看其文档。如果您要从自己的服务器下载文件,请确保将Content-Disposition HTTP响应标头设置为attachment; filename="ORIGINAL_FILENAME",其中ORIGINAL_FILENAME是您要用户查看的文件名在单击下载链接时出现的保存对话框中。

现在开始观看。

对于PDF文件,我使用pdfJS。它有一个角度指令here

您可以查看类似CloudConvert的其他文件,将ehm转换为PDF,然后将其显示在pdfJS中,但您可能还希望将PDF存储在服务器上,原始文件,需要额外的存储空间。您也可以使用Google文档查看器或Office 365查看器,如this answer中所述。