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

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

本项目是本人基于实际工作共享的第一个小项目，诞生于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。

npm install

npm run serve

npm run build

npm run lint

如果您使用了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>

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