@flyfish-group/file-viewer 1.0.0

package/README.md

@@ -0,0 +1,111 @@
+# 基于Vue2实现的文件在线预览 file-viewer
+本项目是本人基于实际工作共享的第一个小项目，诞生于2022年上旬。目前实现了基本格式的预览。
+本项目作为vue3版本的子项目，不再进行更新，使用Vite+Vue2.7+Ts实现了Composition Api的兼容。
+
+已支持Vue3+Vite+TypeScript，请拉取v3分支进行体验。
+
+后续将持续优化pptx和word模块。
+
+目前已有计划支持旧版本的文档格式，基于Web Assembly技术和java的poi。
+
+欢迎各位友友们提交工单和P/R，感谢大家！
+
+## 快速开始
+
+本项目最低Node版本为18.0，请各位友友们使用匹配的版本运行。
+
+### 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 `。最后，在您的项目中引用即可。
+
+```javascript
+import FileViewer from "file-viewer";
+
+Vue.use(FileViewer)
+```
+
+然后，只需要在您的项目中直接使用组件即可。示例如下：
+
+```html
+<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集成（推荐）
+
+#### 开发集成：
+
+1. 请按照“快速开始”章节运行您的示例项目
+2. 打开`example`文件夹中的`embedded.html`，修改目标地址为本地调试地址
+
+```javascript
+var context = {
+    // 查看器的源，当前示例为在线，本地测试请改为 http://localhost:8900
+    origin: 'http://localhost:8900',
+    // 目标frame
+    frame: null,
+    // 文件url
+    url: './word.docx'
+};
+```
+
+3. 直接打开该文件或者使用本地web服务访问。
+4. 具体请参考demo代码，原理是基于`iframe`跨域通信机制。
+
+![image-20230228161454443](/Users/wangyu/Library/Application Support/typora-user-images/image-20230228161454443.png)