如何使用angular 4/5/6显示文件预览？

Question

我想使用角度4/5/6显示文件的预览（缩略图）。 文件类型如下。

1. Excel
2. csv
3. PDF
4. Txt
5. jpeg

有什么办法可以做到这一点？

Answer 1

您可以为此使用iframe， 请参阅https://www.tutorialspoint.com/html/html_iframes.htm以获取更多信息

Answer 2

例如，我们在后端接收到一个数组缓冲区，以确保我们可以通过浏览器检查http响应，图片显示了三个http预览示例：jpg，pdf和docx：

1）案例：直接访问资源（例如：//myserver/mydoc.extension）和公共文档

我们可以使用带有标签的Google Document Viewer来显示远程托管文件

示例

ModelX

2）案例：无法直接访问资源（例如：本地文件夹）

我们可以使用Angular 5/6/7 +支持的库来进行PDF文件渲染

ng2-pdf-查看器：https://www.npmjs.com/package/ng2-pdf-viewer

对于docx文件：

猛oth：https://www.npmjs.com/package/mammoth

3）案例：简单下载

一种解决方案可能是，仅允许下载而不进行预览，可以节省浏览器的性能，并允许用户使用喜欢的软件打开文件。

Angular Service（在后端接收数组缓冲区）

<iframe src="https://docs.google.com/gview?url=http://remote.url.tld/path/to/document.doc&embedded=true"></iframe>

角度组件

downloadFile(file): Observable<any>{
    const url = '/download';
    const params = new HttpParams().set('filename', ''+ file);
    return this.http.post(url, params, { responseType: 'arraybuffer' });
}