基于Vue2实现的文件在线预览 file-viewer使用指南

本文介绍: 本项目是本人基于实际工作共享的第一个小项目，诞生于2022年上旬。目前实现了基本格式的预览。后续计划支持 vue3 + vite，并持续优化 pptx和word 模块。

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

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

已支持Vue3+Vi t e+Ty peSc ript，请拉取 v3分支进行体验。

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

快速开始

1. 项目 安装

npm install

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

npm run serve

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

npm run build

4. 检测并修复 Jav aSc ript 代码中的问题

npm run lint

集成 指南

1. 项目 引用 集成

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

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

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

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

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

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

import FileViewer from "file-viewer";

Vue.use(FileViewer)

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

<template&gt;
  <file-viewer :url="url" /&gt;
</template&gt;

<script&gt;
export default {
  name: "SimpleExample",
  data() {
    return {
      url: 'http://flyfish.group/%E6%95%B0%E6%8D%AE%E4%B8%AD%E5%8F%B0%E7%AC%94%E8%AE%B0(1).docx',
    }
  },
}
</script>

<style scoped>

</style>

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

2. 使用iframe 集成（推荐）

开发集成：

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

var context = {
    // 查看器的源，当前示例为在线，本地测试请改为 http://localhost:8900
    origin: 'http://localhost:8900',
    // 目标frame
    frame: null,
    // 文件url
    url: './word.docx'
};