Fu-filepreview NPM

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"))

fu-component jquery

@everything-registry/sub-chunk-1708 @infinitebrahmanuniverse/nolb-fu-

1.2.0

6 years ago

1.0.0

6 years ago