NGX 文件预览

页:1 • 妇女 联合国

NGX 文件预览 是一个强大的Angular文件预览组件库,支持各种文件格式的预览,并提供灵活的定制选项,为开发者提供高效和方便用户的解决方案.

预览示例

默认列表视图

自定义模板( 示例, 完全自定义)

不同文件类型的预览效果

文件类型	预览效果
图像
视频
音频
PPT 预览
单词
埃克塞尔
文本
标记
齐普
未知

特征

• 支持多个文件格式:完全兼容图像,PDF,PPT,Word,Excel,文本,标记下,音频,视频,以及许多其他常见的文件类型.
• 直观用户体验:为未知文件类型提供清晰的指标,并支持不同文件格式的用户友好互动.
• 黑暗模式和光明模式: 适应各种对暗模式和光模式都有视觉偏好的各种用例,包括自动模式切换.
• 灵活使用: 支持基于指令和基于组件的使用,提供灵活性以满足不同的发展需要.
• 轻量级设计: 优化性能,方便地融入任何项目,确保平稳高效运行.
• 键盘快捷键支持:通过允许轻松地导航并用键盘快捷键关闭预览来提高效率.
• 国际化支助: 内建i18n支持,并具有轻松的语言包注册和切换能力.

安装

npm install @eternalheart/ngx-file-preview --save docx-preview hls.js pptx-preview xlsx ngx-extended-pdf-viewer markdown-it highlight.js

国际化(i18n)

语言配置

您可以在使用指令时指定语言 :

<div [ngxFilePreview]="file" lang="en">Click to preview</div>

注册新语言包

使用自定义语言包注册 I18nUtils.register数字 :

import { I18nUtils } from '@eternalheart/ngx-file-preview';

// Register a new language pack
I18nUtils.register('fr', {
  preview: {
    error: {
      noFiles: 'Aucun fichier à afficher'
    },
    toolbar: {
      zoomIn: 'Zoom avant',
      zoomOut: 'Zoom arrière'
      // ... other translations
    }
  }
  // ... more translation keys
});

使用 i18n 管道( 对于开发者)

使用模板中的i18n管来翻译文本 :

{{ 'preview.toolbar.zoomIn' | i18n }}
// With parameters 
// Use ${0} as a numeric placeholder in the corresponding text. The number of placeholders is unlimited, but you must pass the corresponding number of arguments when using them.
// example: list.total ==> "共${0}个文件"
{{ 'list.total' | i18n:filesCount }}

配置

1. 字体图标配置和资源

将必要的资产、样式和脚本添加到您的 angular.json 文件 :

{
  "projects": {
    "your-app": {
      "architect": {
        "build": {
          "options": {
            "assets": [
              {
                "glob": "**/*",
                "input": "node_modules/ngx-extended-pdf-viewer/assets",
                "output": "assets"
              }
            ],
            "styles": [
              "node_modules/@eternalheart/ngx-file-preview/src/assets/icon/font/nfp.css"
            ],
            "scripts": [
              "node_modules/@eternalheart/ngx-file-preview/src/assets/icon/color/nfp.js"
            ]
          }
        }
      }
    }
  }
}

2. 模块导入

导入您的角模块中所需的组件 :

import {
  PreviewDirective,
  PreviewListComponent,
  PreviewModalComponent
} from '@eternalheart/ngx-file-preview';

@Component({
  imports: [
    PreviewDirective,
    PreviewListComponent,
  ]
})

使用量

1. 指令方法

最简单的使用方法:将指令直接应用到元素上:

import {PreviewDirective, PreviewEvent} from '@eternalheart/ngx-file-preview';

@Component({
  imports: [PreviewDirective],
  template: `
    <!-- Use themeMode to specify the display mode (dark/light). By default, it automatically switches based on time, but can also be manually toggled inside the preview page -->
    <div [ngxFilePreview]="file" themeMode="light">Click to preview a single file</div>
    <div [ngxFilePreview]="file" themeMode="dark" (previewEvent)="handlePreviewEvent($event)">Click to preview a single file</div>
    <div [ngxFilePreview]="file" themeMode="auto" [autoConfig]="{dark: {start: 19, end: 7}}">Click to preview a single file</div>
    <div [ngxFilePreview]="files">Click to preview multiple files</div>
  `
})
export class YourComponent {
  file: PreviewFile = {
    name: 'example.jpg',
    type: 'image',
    url: 'path/to/file.jpg'
  };

  files: PreviewFile[] = [
    // ... file array
  ];

  handlePreviewEvent(event: PreviewEvent) {
    const {type, message, event: targetEvent} = event;
    if (type === "error") {
      console.log(message); // Handle error event
    }
    if (type === "select") {
      console.log(targetEvent); // Handle file selection event
    }
  }
}

2. 构成部分方法

使用默认列表模板 :

import {PreviewListComponent} from '@eternalheart/ngx-file-preview';

@Component({
  imports: [PreviewListComponent],
  template: `
    <ngx-preview-list [files]="files" (fileSelect)="onFileSelect($event)">
    </ngx-preview-list>
  `
})

使用自定义模板 :

@Component({
  template: `
    <ngx-preview-list [files]="files">
      <ng-template #itemTemplate 
                   let-file 
                   let-index="index"
                   let-isActive="isActive"
                   let-preview="preview">
        <div class="custom-item" 
             [class.active]="isActive"
             (click)="preview()">
          <span>{{ file.name }}</span>
          <span>{{ formatFileSize(file.size) }}</span>
        </div>
      </ng-template>
    </ngx-preview-list>
  `
})

文件配置

PreviewFile 接口

interface PreviewFile {
  url: string;          // File URL
  name: string;         // File name
  type?: PreviewType;    // File type - Not nessary
  size?: number;        // File size (optional)
  lastModified?: number;// Last modified time (optional)
  coverUrl?: string;    // Cover image URL (for video/audio, optional)
}

支持的文件类型( E)PreviewType(中文(简体) )

type PreviewType =
  | 'image'   // Image
  | 'pdf'     // PDF Document
  | 'ppt'     // PPT Presentation
  | 'word'    // Word Document
  | 'txt'     // Text File
  | 'video'   // Video
  | 'excel'   // Excel Spreadsheet
  | 'audio'   // Audio
  | 'zip'     // Compressed File
  | 'unknown' // Unknown Type

API 参考

预览列表组件

模板上下文变量

预览指令

预览事件类型

键盘快捷键

在预览模式中,可以使用以下快捷键:

• ← 上一个文件
• → 下一个文件
• Esc 关闭预览

发展指南

1. 清除仓库 :

git clone https://github.com/wh131462/ngx-file-preview.git

2. 安装依赖性 :

npm install

3. 启动开发服务器 :

npm run start

4. 构建库 :

npm run build

贡献准则

随便你 问题 财务报告和审定财务报表 调取请求 帮助改进这个项目!

许可证

麻省理工学院

承认

该项目使用以下优秀的开源库:

• docx 预览 - 文字文档预览
• pptx 预览 - PPT 演示文稿预览
• ưμ㼯a - Excel电子表格预览
• ngx- extend- pdf- 查看器 - PDF 文档预览
• hls.js (英语) - HLS视频流支持
• 缩放 - Markdown支持系统
• 突出显示.js - Markdown中的代码由Markdown支持突出显示

我们赞赏这些开放源码项目对社区的贡献!