希望使用angularjs创建gmail附件预览等功能

Question

我需要向用户显示文件预览。

支持的文件类型有多种，如。pdf。xlsx。文件。rar。jpeg。巴布亚新几内亚和更多。

当用户点击预览时，它应该在弹出窗口中打开文件，文件的预览显示给他。用户可以放大，缩小，下载文件。正如你可以看到gmail附件预览。

请，任何人都可以引导我到任何相关的图书馆或有用的资源相同。

提前谢谢

Answer 1

这个问题相当广泛。我不会介绍如何实现附件查看器指令的所有步骤，但这里有一些您可能会发现有用的指针。

要允许用户下载该文件，只需在某处放置一个下载链接。如果您在AmazonS3、Google云存储或其他云存储服务上托管附件，请查看他们的文档。如果您正在从自己的服务器下载文件，请确保将内容配置HTTP响应头设置为附件；filename=“ORIGINAL\u filename”，其中ORIGINAL\u filename是用户单击下载链接时出现的保存对话框中希望用户看到的文件名。

现在来看看观众。

对于PDF文件，我会使用pdfJS。这里有一个角指令。

您可以查看类似于CloudConvert的其他文件，将ehm转换为PDF，然后在pdfJS中显示它们，但是，除了原始文件之外，您可能还希望在服务器上存储PDF，这需要额外的存储。您也可以使用Google文档查看器或Office 365查看器，如本答案中所述。

Answer 2

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

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

您可以将doc和xlsx文件转换为pdf，并使用pdf查看器（http://ngmodules.org/modules/ng-pdfviewer）显示这些文件。互联网上有很多文档转换器（但是你需要检查许可条款，因为大多数都是GPL许可的，所以不能在商业项目中使用）。

如果你想保存这项工作，然后去第三方服务器，这些服务器需要所有的油漆来转换html5中的文档，如https://crocodoc.com/why-crocodoc/

您也可以尝试使用谷歌文档查看器谷歌文档浏览器

Answer 3

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

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

2）客户端：在浏览器中用javascript渲染预览“活”，这减少了服务器必须做/存储的量，但确实需要客户端在渲染预览之前在内存中完全下载文件，这对于大文件来说可能是个问题...此外，您可能需要为每个单独的文件类型包含javascript库，因为大多数库将针对一种特定的文件格式。

服务器端可能是推荐的方式去。您的Web服务器使用的是什么？