项目作者: fund-ui

项目描述 :
A simple file preview component that looks like a picture(一个类似图片查看的文件预览组件)
高级语言: JavaScript
项目地址: git://github.com/fund-ui/fu-filePreview.git




Vue logo



Build Status
Coverage Status
Downloads
Version
License

FuFilePreview

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

Demo

1. 简介

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

  • 使用 Mozzilia 开源的 PDF.js 对文档进行查看,由于该插件使用的是 HTML5 技术,所以对低版本浏览器的支持并不友好,而且不支持 Word文件的在线预览。

  • 编写服务端将已上传的 PDF Word 等格式的文档解析拆分成图片并存储,在前端预览时只需依次响应图片资源,前端通过类似图片预加载的方式,查看图片,达到同样的文件预览效果, 改方法浏览器兼容好,但是文件较大时,可能耗费较多的服务器性能去解析文件。

2. 快速开始

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

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

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

3. 安装

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

  1. npm install fu-filePreview --save

4. 使用

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

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
  5. <title>
  6. 首页
  7. </title>
  8. </head>
  9. <body>
  10. <div id="app"></div>
  11. </body>
  12. <script>
  13. var myFilePreview = new FuFilePreview({
  14. fileId: "wj871287",
  15. fileName: "Redux指南.pdf",
  16. fileTotalPage: 50,
  17. fileDownloadUrl: "https://raw.githubusercontent.com/fund-ui/fu-filePreview/d570800bf87a87c464c4a266e58a933b71fb524a/src/asset/redux-in-chinese.pdf",
  18. fileSrcArr: [
  19. "https://github.com/fund-ui/fu-filePreview/blob/master/src/asset/img/1.jpeg",
  20. "https://github.com/fund-ui/fu-filePreview/blob/master/src/asset/img/2.jpeg",
  21. "https://github.com/fund-ui/fu-filePreview/blob/master/src/asset/img/3.jpeg",
  22. "https://github.com/fund-ui/fu-filePreview/blob/master/src/asset/img/4.jpeg",
  23. ...
  24. ]
  25. });
  26. myFilePreview.renderDOM(document.getElementById("app"));
  27. myFilePreview.init();
  28. </script>
  29. </html>

5. 进阶

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

5.1 React

  1. import 'fu-filePreview/asset/index.css';
  2. import React from 'react';
  3. import ReactDOM from 'react-dom';
  4. import FilePreview from 'fu-FilePreview';
  5. class FuFilePreview extends React.Component {
  6. constructor(props) {
  7. super(props);
  8. this.state = {
  9. ...
  10. };
  11. }
  12. render() {
  13. return (
  14. <div>
  15. <FilePreview
  16. fileName={"Redux指南.pdf"}
  17. totalPage={100}
  18. ></FilePreview>
  19. <div>
  20. );
  21. }
  22. }
  23. ReactDOM.render(
  24. <FuFilePreview fileName="Redux指南.pdf" totalPage={100} ></FuFilePreview>,
  25. document.getElementById("app"))