fu-filepreview

v1.2.0

Published

3 years ago

A set of UI components for Fund Management System

Downloads

0High
0Medium
0Low

turkyden

FuFilePreview

一个简单好用的类似图片查看的文件预览组件示例

Demo

1. 简介

在文档管理系统中，我们上传 PDF Word 等格式的文档后，都希望通过在线预览的方式查看这些文档，目前主要有两种方式：

使用 Mozzilia 开源的 PDF.js 对文档进行查看，由于该插件使用的是 HTML5 技术，所以对低版本浏览器的支持并不友好，而且不支持 Word文件的在线预览。
编写服务端将已上传的 PDF Word 等格式的文档解析拆分成图片并存储，在前端预览时只需依次响应图片资源，前端通过类似图片预加载的方式，查看图片，达到同样的文件预览效果, 改方法浏览器兼容好，但是文件较大时，可能耗费较多的服务器性能去解析文件。

2. 快速开始

该项目已发布 cdnjs，你可直接将插件引入页面使用

<script src="https://cdnjs.cloudflare.com/ajax/libs/fu-filePreview/1.2.0/fu-filePreview.min.js"></script>

Tips: 这里无需单独引入 css 样式文件，因为我们已使用 webpack 将样式一并构建进 javascript 中

3. 安装

当然我们更加推荐你使用 npm 与 nodejs 在本地进行安装构建

npm install fu-filePreview --save

4. 使用

你可以直接新建一个 html 页面并实例化组件，推荐面向对象的写法配置必备的参数

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title>
        首页
    </title>
</head>
<body>
    <div id="app"></div>
</body>
<script>
    var myFilePreview = new FuFilePreview({
        fileId: "wj871287",
        fileName: "Redux指南.pdf",
        fileTotalPage: 50,
        fileDownloadUrl: "https://raw.githubusercontent.com/fund-ui/fu-filePreview/d570800bf87a87c464c4a266e58a933b71fb524a/src/asset/redux-in-chinese.pdf",
        fileSrcArr: [
            "https://github.com/fund-ui/fu-filePreview/blob/master/src/asset/img/1.jpeg",
            "https://github.com/fund-ui/fu-filePreview/blob/master/src/asset/img/2.jpeg",
            "https://github.com/fund-ui/fu-filePreview/blob/master/src/asset/img/3.jpeg",
            "https://github.com/fund-ui/fu-filePreview/blob/master/src/asset/img/4.jpeg",
            ...
        ]
    });
    myFilePreview.renderDOM(document.getElementById("app"));
    myFilePreview.init();
</script>
</html>

5. 进阶

如果你使用现代框架，可以这样使用我们的组件

5.1 React

import 'fu-filePreview/asset/index.css';
import React from 'react';
import ReactDOM from 'react-dom';
import FilePreview from 'fu-FilePreview';

class FuFilePreview extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            ...
        };
    }
    render() {
        return (
            <div>
                <FilePreview 
                    fileName={"Redux指南.pdf"} 
                    totalPage={100}
                />
            <div>
        );
    }
}

ReactDOM.render(
    <FuFilePreview fileName="Redux指南.pdf" totalPage={100} ></FuFilePreview>,
    document.getElementById("app"))

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme