angular - 如何以 Angular 8 显示文件

Question

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

ngx-doc-查看器: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/

Answer 1

您可以使用 Angular 文件查看器
此包支持 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