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

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

【问题讨论】:

  • 您无法从浏览器访问文件系统。您的服务器可以访问文件系统,并且您可以将所需的任何文件信息从服务器提供给 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

【讨论】:

    猜你喜欢
    • 2020-04-24
    • 2021-01-29
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2017-01-19
    • 2022-01-26
    • 1970-01-01
    相关资源
    最近更新 更多