基于Vue2实现的文件在线预览 file-viewer

本项目是本人基于实际工作共享的第一个小项目，诞生于2022年上旬。目前实现了基本格式的预览。 本项目作为vue3版本的子项目，不再进行更新，使用Vite+Vue2.7+Ts实现了Composition Api的兼容。

已支持Vue3+Vite+TypeScript，请拉取v3分支进行体验。

后续将持续优化pptx和word模块。

目前已有计划支持旧版本的文档格式，基于Web Assembly技术和java的poi。

快速开始

1. 项目安装

npm install

2. 项目编译以及支持热加载的开发模式

npm run serve

3. 编译生产包并最小化文件资源

npm run build

4. 检测并修复 JavaScript 代码中的问题

npm run lint

集成指南

1. 项目引用集成

Tips: 本集成方式将会全量引入本项目的所有代码和依赖，所以可能会在您的项目中产生依赖版本冲突，请注意甄别。如果发生很多的依赖冲突，建议立即更换iframe集成方式，更轻量级，且日后能够无缝升级。

如果您使用了flyfish的私库，请使用以下命令安装依赖即可。

npm install --save @flyfish-group/file-viewer

常规情况下，请使用npm link的方式进行集成。

假设您将本项目clone到了D:\Works\file-viewer下，接下来请按照下面的步骤进行安装。

首先，打开命令行工具，cd [你的项目位置]，然后执行npm link D:\Works\file-viewer 。最后，在您的项目中引用即可。

import FileViewer from "file-viewer";

Vue.use(FileViewer)

然后，只需要在您的项目中直接使用组件即可。示例如下：

此外，组件还支持直接传入文件或者二进制进行展示。

2. 使用iframe集成（推荐）

开发集成：

请按照“快速开始”章节运行您的示例项目打开example文件夹中的embedded.html，修改目标地址为本地调试地址

var context = {

// 查看器的源，当前示例为在线，本地测试请改为 http://localhost:8900

origin: 'http://localhost:8900',

// 目标frame

frame: null,

// 文件url

url: './word.docx'

};

直接打开该文件或者使用本地web服务访问。具体请参考demo代码，原理是基于iframe跨域通信机制。

参考文章

评论可见，请评论后查看内容，谢谢！！！评论后请刷新页面。