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

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

欢迎各位友友们提交工单和P/R，感谢大家！

快速开始

1. 项目安装

npm install

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

npm run serve

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

npm run build

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

npm run lint

集成指南

1. 项目引用集成

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

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

npm install --save file-viewer

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

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

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

import FileViewer from "file-viewer";

Vue.use(FileViewer)

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

<template>
  <file-viewer :url="url" />
</template>

<script>
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'
};

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

请添加图片描述

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