.gitignore

@@ -1,26 +1,21 @@
-# Logs
+.DS_Store
-logs
+node_modules
-*.log
+/dist
+
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 pnpm-debug.log*
-lerna-debug.log*
-
-node_modules
-.DS_Store
-dist
-dist-ssr
-coverage
-*.local
-
-/cypress/videos/
-/cypress/screenshots/
 
 # Editor directories and files
-.vscode/*
-!.vscode/extensions.json
 .idea
+.vscode
 *.suo
 *.ntvs*
 *.njsproj

.vscode/extensions.json

@@ -1,3 +0,0 @@
-{
-  "recommendations": ["Vue.volar", "Vue.vscode-typescript-vue-plugin"]
-}

README.md

@@ -1,23 +1,29 @@
-# FileViewer 项目Vue3 demo
+# FileViewer 项目Vue2 demo
 
-本demo基于vite+ts+vue3构建，如果您需要vue2版本的demo，请拉取v2分支。
+本demo基于vue-cli+js+vue2.x构建，如果您需要vue3版本的demo，请前往main分支。
+
+**适用于Vue2 + Webpack，本集成方法要求最低Webpack版本为5，也就是Vue Cli Service 5.0.0以上，当然，iframe集成没有任何限制**
 
 > 注意，为了版本稳定性，在iframe集成的场景下，无论是vue2版本还是vue3版本，都建议使用file-viewer3以获得最佳性能。
 
 
-
 ## 方式一：iframe集成（推荐）
 
 iframe集成是我们最推荐的集成方式，可以跳过所有的坑，为您的项目快速集成文件预览能力。
 
 
 ### 源码准备
-下载我们的最新版本的file-viewer源码，然后执行`npm run build`，或者`yarn build`。
+下载我们的最新版本的file-viewer源码，然后执行`npm build build`，或者`yarn build`。
 
 ### 构建产物集成
 然后将构建后的dist目录拷贝到您项目的public目录下。当然也可以放置到任何项目中。本demo只是演示。
 
-如果您在公网，建议您使用我们的cdn：https://viewer.flyfish.dev，以获得高效的访问。
+如果您在公网，建议您使用我们的cdn：
+
+https://viewer.flyfish.dev
+
+以获得高效的访问。
+
 如果您在内网，可以完全参照本demo进行实施。
 
 ### 添加iframe标签
@@ -25,7 +31,7 @@ iframe集成是我们最推荐的集成方式，可以跳过所有的坑，为
 
 1. **使用url控制切换（推荐）**
 
-  这种方式是最便捷的实现方式，适合有文件链接的方案。如果你的文件是**流式传输**或者需要用于上传体验，则不适合该方案。
+这种方式是最便捷的实现方式，适合有文件链接的方案。如果你的文件是**流式传输**或者需要用于上传体验，则不适合该方案。
 
 2. **使用postMessage发送文件数据**
 
@@ -34,61 +40,65 @@ iframe集成是我们最推荐的集成方式，可以跳过所有的坑，为
 示例的`IframeViewer.vue`组件实现如下，该组件同时支持两种文件控制方式，您可以直接集成：
 
 ```vue
-<script setup lang="ts">
-import {computed, nextTick, onMounted, ref} from "vue";
-
-const props = defineProps<{
-    url?: string,
-    file?: File,
-    name?: string,
-}>()
-
-// iframe引用
-const frame = ref<HTMLIFrameElement>();
-// iframe路径指向构建产物，这里是/，因为放在了public下面
-// 如果使用cdn，请使用https://viewer.flyfish.dev
-const source = '/dist/index.html'
-// 查看器的源，当前示例为本源，指定为location.origin即可
-const viewerOrigin = location.origin;
-// 构建完整url
-const src = computed(() => {
-    // 文件名称，建议传递，提高体验性
-    const name = props.name || '';
-    if (props.url) {
-        // 直接拼接url
-        return `${source}?url=${encodeURIComponent(props.url)}&name=${encodeURIComponent(name)}`
-    } else if (props.file) {
-        // 直接拼接来源origin
-        return `${source}?from=${encodeURIComponent(viewerOrigin)}&name=${encodeURIComponent(name)}`
-    } else {
-        return source;
-    }
-})
-
-// 发送文件数据
-const sendFileData = () => {
-    nextTick(() => {
-        const viewer = frame.value;
-        if (!viewer || !props.file) return;
-        viewer.onload = () => viewer.contentWindow?.postMessage(props.file, viewerOrigin);
-    })
-}
-
-onMounted(() => {
-    sendFileData();
-})
-</script>
-
 <template>
-  <iframe title="文档预览" ref="frame" :src="src" class="iframe-viewer" />
+   <iframe title="文档预览" ref="frame" :src="src" class="iframe-viewer"/>
 </template>
 
+<script>
+
+   // 查看器的源，当前示例为本源，指定为location.origin即可
+   const viewerOrigin = location.origin;
+
+   // iframe路径指向构建产物，这里是/，因为放在了public下面
+   // 如果使用cdn，请使用https://viewer.flyfish.dev
+   const source = '/dist/index.html'
+
+   export default {
+      name: 'IframeViewer',
+      props: {
+         url: String,
+         file: File,
+         name: String,
+      },
+      mounted() {
+         this.sendFileData();
+      },
+      computed: {
+         // 构建完整url
+         src() {
+            // 文件名称，建议传递，提高体验性
+            const name = this.name || '';
+            if (this.url) {
+               // 直接拼接url
+               return `${source}?url=${encodeURIComponent(this.url)}&name=${encodeURIComponent(name)}`
+            } else if (this.file) {
+               // 直接拼接来源origin
+               return `${source}?from=${encodeURIComponent(viewerOrigin)}&name=${encodeURIComponent(name)}`
+            } else {
+               return source;
+            }
+         }
+      },
+      methods: {
+         // 发送文件数据
+         sendFileData() {
+            this.nextTick(() => {
+               // iframe引用
+               const viewer = this.$refs.frame;
+               if (!viewer || !this.file) return;
+               viewer.onload = () => viewer.contentWindow?.postMessage(this.file, viewerOrigin);
+            })
+         }
+      }
+   }
+</script>
+
 <style scoped>
-.iframe-viewer {
+   .iframe-viewer {
-    height: calc(100vh - 2px);
+      height: calc(100vh - 2px);
-    width: 100%;
+      width: 100%;
-    border: 0
+      border: 0
-}
+   }
 </style>
 
 ```
@@ -109,41 +119,54 @@ onMounted(() => {
 
 以下是示例代码：
 
-`main.ts`
+`main.js`
 
-```typescript
+```javascript
-import { createApp } from 'vue'
+import Vue from 'vue'
-import App from './App.vue'
+import FileViewer from '@flyfish-group/file-viewer'
-import FileViewer from '@flyfish-group/file-viewer3'
 
-import '@flyfish-group/file-viewer3/dist/style.css'
+// 导入样式
+import '@flyfish-group/file-viewer/dist/style.css'
+
+Vue.use(FileViewer);
+
+new Vue({
+   render: h => h(App),
+}).$mount('#app')
 
-createApp(App).use(FileViewer).mount('#app')
 ```
 
 `InnerViewer.vue`
 
 ```vue
-<script setup lang='ts'>
-import {ref} from "vue";
-
-defineProps<{
-    url: string
-}>()
-
-</script>
 <template>
-  <div class='simple-view'>
+   <div class='simple-view'>
-    <file-viewer :url="url" />
+      <file-viewer :url="url" />
-  </div>
+   </div>
 </template>
 
+<script>
+   export default {
+      name: 'InnerViewer',
+      props: {
+         url: String,
+      },
+   }
+</script>
+
 <style scoped>
-.simple-view {
+   .simple-view {
-    width: 100%;
+      width: 100%;
-    height: calc(100vh - 2px);
+      height: calc(100vh - 2px);
-}
+   }
 </style>
 
 ```
 
+需要注意的是，内置组件`file-viewer`支持使用data的方式传入文件的二进制数据，您可以自行从服务器拉取集成。以下是组件API。
+
+| 属性名 | 类型                        | 示例                         | 属性描述                                                  |
+| ------ | --------------------------- | ---------------------------- | --------------------------------------------------------- |
+| file   | File \| Blob \| ArrayBuffer | new Blob(...)                | 支持文件、二进制blob和arraybuffer数组缓存                 |
+| url    | String                      | "https://flyfish.dev/1.docx" | 支持任意服务器文件url，需要支持跨域访问，即存在cors响应头 |
+

babel.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  presets: [
+    '@vue/cli-plugin-babel/preset'
+  ]
+}

env.d.ts

@@ -1 +0,0 @@
-/// <reference types="vite/client" />

index.html

@@ -1,13 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8">
-    <link rel="icon" href="/favicon.ico">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>FileViewer3集成示例</title>
-  </head>
-  <body>
-    <div id="app"></div>
-    <script type="module" src="/src/main.ts"></script>
-  </body>
-</html>

jsconfig.json

@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "module": "esnext",
+    "baseUrl": "./",
+    "moduleResolution": "node",
+    "paths": {
+      "@/*": [
+        "src/*"
+      ]
+    },
+    "lib": [
+      "esnext",
+      "dom",
+      "dom.iterable",
+      "scripthost"
+    ]
+  }
+}

package.json

@@ -1,26 +1,44 @@
 {
-  "name": "file-view-demo",
+  "name": "file-view-demo-vue2",
-  "version": "0.0.0",
+  "version": "0.1.0",
   "private": true,
   "scripts": {
-    "dev": "vite",
+    "serve": "vue-cli-service serve",
-    "build": "run-p type-check build-only",
+    "build": "vue-cli-service build",
-    "preview": "vite preview",
+    "lint": "vue-cli-service lint"
-    "build-only": "vite build",
-    "type-check": "vue-tsc --noEmit"
   },
   "dependencies": {
-    "@flyfish-group/file-viewer3": "^1.0.2",
+    "@flyfish-group/file-viewer": "^1.0.4",
-    "vue": "^3.2.47"
+    "core-js": "^3.8.3",
+    "vue": "^2.6.14"
   },
   "devDependencies": {
-    "@types/node": "^18.14.2",
+    "@babel/core": "^7.12.16",
-    "@vitejs/plugin-vue": "^4.0.0",
+    "@babel/eslint-parser": "^7.12.16",
-    "@vitejs/plugin-vue-jsx": "^3.0.0",
+    "@vue/cli-plugin-babel": "~5.0.0",
-    "@vue/tsconfig": "^0.1.3",
+    "@vue/cli-plugin-eslint": "~5.0.0",
-    "npm-run-all": "^4.1.5",
+    "@vue/cli-service": "~5.0.0",
-    "typescript": "~4.8.4",
+    "eslint": "^7.32.0",
-    "vite": "^4.1.4",
+    "eslint-plugin-vue": "^8.0.3",
-    "vue-tsc": "^1.2.0"
+    "vue-template-compiler": "^2.6.14"
-  }
+  },
+  "eslintConfig": {
+    "root": true,
+    "env": {
+      "node": true
+    },
+    "extends": [
+      "plugin:vue/essential",
+      "eslint:recommended"
+    ],
+    "parserOptions": {
+      "parser": "@babel/eslint-parser"
+    },
+    "rules": {}
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not dead"
+  ]
 }

public/index.html

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <title><%= htmlWebpackPlugin.options.title %></title>
+  </head>
+  <body>
+    <noscript>
+      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+    </noscript>
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+  </body>
+</html>

src/App.vue

@@ -1,17 +1,3 @@
-<script setup lang="ts">
-import {ref} from "vue";
-import InnerViewer from './components/InnerViewer.vue'
-import IframeViewer from "./components/IframeViewer.vue";
-import excel from '@/assets/excel.xlsx?url'
-import pdf1 from '@/assets/666.pdf?url'
-import pdf2 from '@/assets/888.pdf?url'
-
-
-// 预览的url
-const url = ref<string>(excel);
-// 提供inner和embedded
-const mode = ref<string>('inner');
-</script>
 
 <template>
   <header>
@@ -41,26 +27,53 @@ const mode = ref<string>('inner');
   </header>
 </template>
 
+<script>
+import InnerViewer from './components/InnerViewer'
+import IframeViewer from "./components/IframeViewer";
+
+// 测试文件，这些文件实际情况可能是其他服务器链接
+const excel = 'excel.xlsx';
+const pdf1 = '666.pdf';
+const pdf2 = '888.pdf';
+
+export default {
+  name: 'App',
+  data() {
+    return {
+      url: excel,
+      mode: 'inner',
+      excel,
+      pdf1,
+      pdf2,
+    }
+  },
+  components: {
+    InnerViewer,
+    IframeViewer
+  }
+}
+</script>
+
 <style scoped>
 header {
-    line-height: 1.5;
+  line-height: 1.5;
 }
 
 .tool-bar {
-    background-color: hsla(160, 100%, 37%, 0.2);
+  background-color: hsla(160, 100%, 37%, 0.2);
-    width: 230px;
+  width: 230px;
-    height: 100vh;
+  height: 100vh;
-    padding-left: 8px;
+  padding-left: 8px;
 }
 
 @media (min-width: 1024px) {
-    header {
+  header {
-        display: flex;
+    display: flex;
-        position: relative;
+    position: relative;
-    }
+  }
 
-    header .wrapper {
+  header .wrapper {
-        flex: 1;
+    flex: 1;
-    }
+  }
 }
 </style>

src/assets/logo.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 261.76 226.69"><path d="M161.096.001l-30.225 52.351L100.647.001H-.005l130.877 226.688L261.749.001z" fill="#41b883"/><path d="M161.096.001l-30.225 52.351L100.647.001H52.346l78.526 136.01L209.398.001z" fill="#34495e"/></svg>

src/components/IframeViewer.vue

@@ -1,56 +1,60 @@
-<script setup lang="ts">
+<template>
-import {computed, nextTick, onMounted, ref} from "vue";
+  <iframe title="文档预览" ref="frame" :src="src" class="iframe-viewer"/>
+</template>
 
-const props = defineProps<{
+<script>
-    url?: string,
+
-    file?: File,
+// 查看器的源，当前示例为本源，指定为location.origin即可
-    name?: string,
+const viewerOrigin = location.origin;
-}>()
 
-// iframe引用
-const frame = ref<HTMLIFrameElement>();
 // iframe路径指向构建产物，这里是/，因为放在了public下面
 // 如果使用cdn，请使用https://viewer.flyfish.dev
 const source = '/dist/index.html'
-// 查看器的源，当前示例为本源，指定为location.origin即可
+
-const viewerOrigin = location.origin;
+export default {
-// 构建完整url
+  name: 'IframeViewer',
-const src = computed(() => {
+  props: {
-    // 文件名称，建议传递，提高体验性
+    url: String,
-    const name = props.name || '';
+    file: File,
-    if (props.url) {
+    name: String,
+  },
+  mounted() {
+    this.sendFileData();
+  },
+  computed: {
+    // 构建完整url
+    src() {
+      // 文件名称，建议传递，提高体验性
+      const name = this.name || '';
+      if (this.url) {
         // 直接拼接url
-        return `${source}?url=${encodeURIComponent(props.url)}&name=${encodeURIComponent(name)}`
+        return `${source}?url=${encodeURIComponent(this.url)}&name=${encodeURIComponent(name)}`
-    } else if (props.file) {
+      } else if (this.file) {
         // 直接拼接来源origin
         return `${source}?from=${encodeURIComponent(viewerOrigin)}&name=${encodeURIComponent(name)}`
-    } else {
+      } else {
         return source;
+      }
     }
-})
+  },
-
+  methods: {
-// 发送文件数据
+    // 发送文件数据
-const sendFileData = () => {
+    sendFileData() {
-    nextTick(() => {
+      this.nextTick(() => {
-        const viewer = frame.value;
+        // iframe引用
-        if (!viewer || !props.file) return;
+        const viewer = this.$refs.frame;
-        viewer.onload = () => viewer.contentWindow?.postMessage(props.file, viewerOrigin);
+        if (!viewer || !this.file) return;
-    })
+        viewer.onload = () => viewer.contentWindow?.postMessage(this.file, viewerOrigin);
+      })
+    }
+  }
 }
-
-onMounted(() => {
-    sendFileData();
-})
 </script>
 
-<template>
-  <iframe title="文档预览" ref="frame" :src="src" class="iframe-viewer" />
-</template>
-
 <style scoped>
 .iframe-viewer {
-    height: calc(100vh - 2px);
+  height: calc(100vh - 2px);
-    width: 100%;
+  width: 100%;
-    border: 0
+  border: 0
 }
 </style>

src/components/InnerViewer.vue

@@ -1,17 +1,18 @@
-<script setup lang='ts'>
-import {ref} from "vue";
-
-defineProps<{
-    url: string
-}>()
-
-</script>
 <template>
   <div class='simple-view'>
     <file-viewer :url="url" />
   </div>
 </template>
 
+<script>
+export default {
+  name: 'InnerViewer',
+  props: {
+    url: String,
+  },
+}
+</script>
+
 <style scoped>
 .simple-view {
     width: 100%;

src/main.js

@@ -0,0 +1,14 @@
+import Vue from 'vue'
+import App from './App.vue'
+import FileViewer from '@flyfish-group/file-viewer'
+
+// 导入样式
+import '@flyfish-group/file-viewer/dist/style.css'
+
+Vue.config.productionTip = false
+
+Vue.use(FileViewer);
+
+new Vue({
+  render: h => h(App),
+}).$mount('#app')

src/main.ts

@@ -1,8 +0,0 @@
-import { createApp } from 'vue'
-import App from './App.vue'
-import FileViewer from '@flyfish-group/file-viewer3'
-
-import './assets/main.css'
-import '@flyfish-group/file-viewer3/dist/style.css'
-
-createApp(App).use(FileViewer).mount('#app')

tsconfig.json

@@ -1,16 +0,0 @@
-{
-  "extends": "@vue/tsconfig/tsconfig.web.json",
-  "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
-  "compilerOptions": {
-    "baseUrl": ".",
-    "paths": {
-      "@/*": ["./src/*"]
-    }
-  },
-
-  "references": [
-    {
-      "path": "./tsconfig.node.json"
-    }
-  ]
-}

tsconfig.node.json

@@ -1,8 +0,0 @@
-{
-  "extends": "@vue/tsconfig/tsconfig.node.json",
-  "include": ["vite.config.*", "vitest.config.*", "cypress.config.*", "playwright.config.*"],
-  "compilerOptions": {
-    "composite": true,
-    "types": ["node"]
-  }
-}

vite.config.ts

@@ -1,21 +0,0 @@
-import {fileURLToPath, URL} from 'node:url'
-
-import {defineConfig} from 'vite'
-import vue from '@vitejs/plugin-vue'
-import vueJsx from '@vitejs/plugin-vue-jsx'
-
-// https://vitejs.dev/config/
-export default defineConfig({
-    plugins: [vue(), vueJsx()],
-    base: './',
-    optimizeDeps: {
-        include: [
-            './node_modules/@flyfish-group/file-viewer3/dist/components',
-        ],
-    },
-    resolve: {
-        alias: {
-            '@': fileURLToPath(new URL('./src', import.meta.url))
-        }
-    }
-})

vue.config.js

@@ -0,0 +1,7 @@
+const { defineConfig } = require('@vue/cli-service')
+module.exports = defineConfig({
+  // 我们使用根节点，如果使用其他子目录，请设置具体的路径映射
+  publicPath: '/',
+  // 默认转换依赖
+  transpileDependencies: true
+})