react-file-viewer

用于网页的可扩展文件查看器

支持的文件格式：

图片：png、jpeg、gif、bmp，包括360度全景图
pdf
csv
xlsx
docx
视频：mp4、webm
音频：mp3

使用方法

注意：此模块在React 16+版本下运行最佳。如果您使用的是React 16以下版本，您可能需要使用0.5版本。可以通过npm install react-file-viewer@0.5.0安装。

主要的React组件是FileViewer，它接受以下属性：

fileType 字符串：要显示的资源类型（支持的文件格式之一，例如'png'）。传入不支持的文件类型将显示"不支持的文件类型"消息（或自定义组件）。

filePath 字符串：FileViewer要显示的资源的URL。

onError 函数 [可选]：当文件查看器在获取或渲染请求的资源时出错时将调用此函数。您可以在此处传入日志记录工具的回调函数。

errorComponent React元素 [可选]：出错时要渲染的组件，用于替代react-file-viewer自带的默认错误组件。

unsupportedComponent React元素 [可选]：文件格式不受支持时要渲染的组件。

要使用自定义错误组件，您可以这样做：

// MyApp.js
import React, { Component } from 'react';
import logger from 'logging-library';
import FileViewer from 'react-file-viewer';
import { CustomErrorComponent } from 'custom-error';

const file = 'http://example.com/image.png'
const type = 'png'

class MyComponent extends Component {
  render() {
    return (
      <FileViewer
        fileType={type}
        filePath={file}
        errorComponent={CustomErrorComponent}
        onError={this.onError}/>
    );
  }

  onError(e) {
    logger.logError(e, 'error in file-viewer');
  }
}

开发

此库内置了一个演示应用，可用于开发目的。默认情况下，它通过webpack-dev-server提供服务。

启动演示应用

运行npm run start将启动由webpack-dev-server提供服务的演示应用

测试

测试使用Jest和Enzyme。

运行测试：

npm run test

这将以监视模式启动Jest。要运行特定的测试文件，在监视模式下按p，然后输入文件的路径或名称。

某些测试使用快照。如果对组件的有意更改导致快照测试失败，需要更新快照文件（存储在__snapshots__目录中）。要执行此操作，请运行：

npm run jest --updateSnapshot

运行代码检查

npm run lint

扩展文件查看器

添加支持的文件类型很容易（欢迎提交拉取请求！）。例如，假设您想添加对.rtf文件的支持。首先，您需要为该文件类型创建一个"驱动程序"。驱动程序只是一个能够渲染该文件类型的组件。（请参阅src/components/drivers中现有的驱动程序。）创建驱动程序组件并将其添加到src/components/drivers后，您只需要将该组件导入到file-viewer.jsx中，并在getDriver方法中为rtf添加一个switch子句。例如：