FuFilePreview
一个简单好用的类似图片查看的文件预览组件 示例
1. 简介
在文档管理系统中，我们上传 PDF Word 等格式的文档后，都希望通过在线预览的方式查看这些文档，目前主要有两种方式：
-
使用 Mozzilia 开源的
PDF.js对文档进行查看，由于该插件使用的是HTML5技术，所以对低版本浏览器的支持并不友好，而且不支持Word文件的在线预览。 -
编写服务端将已上传的
PDFWord等格式的文档解析拆分成图片并存储，在前端预览时只需依次响应图片资源，前端通过类似图片预加载的方式，查看图片，达到同样的文件预览效果, 改方法浏览器兼容好，但是文件较大时，可能耗费较多的服务器性能去解析文件。
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"))