如何以角度8显示文件答案

【问题标题】：how to show files in angular 8如何以角度8显示文件
【发布时间】：2020-06-29 06:35:30
【问题描述】：

我想在 Angular 组件中显示具有不同扩展名的文件。我为此使用什么模块？我查看了以下模块。但每个模块都有问题。

ngx 文档查看器：https://www.npmjs.com/package/ngx-doc-viewer
ngx-extended-pdf-viewer: https://www.npmjs.com/package/ngx-extended-pdf-viewer
网页浏览器：https://www.pdftron.com/webviewer/demo/

【问题讨论】：

您无法从浏览器访问文件系统。您的服务器可以访问文件系统，并且您可以将所需的任何文件信息从服务器提供给 Angular 应用

标签： angular file viewer

【解决方案1】：

你可以使用 angular-file-viewer

此软件包支持 PDF、JPEG、PNG、MP4

Demo

安装

npm i @taldor-ltd/angular-file-viewer ng2-pdf-viewer

用法

将 AngularFileViewerModule 添加到模块的导入中

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AngularFileViewerModule } from '@taldor-ltd/angular-file-viewer';

import { AppComponent } from './app/app.component';

 @NgModule({
  imports: [BrowserModule, AngularFileViewerModule],
 declarations: [AppComponent],
 bootstrap: [AppComponent]
 })

 class AppModule {}

platformBrowserDynamic().bootstrapModule(AppModule);

然后在你的组件中使用它

（PDF 样本）

import { Component } from '@angular/core';

import { FileMimeType } from '@taldor-ltd/angular-file-viewer';

@Component({
selector: 'app-root',
template: `
<tld-file-viewer [src]="src" [type]="type"></tld-file-viewer>`

})
export class AppComponent {
src = 'http://www.africau.edu/images/default/sample.pdf';
 type = FileMimeType.PDF;
}

documentation

【讨论】：