25 changed files with 11065 additions and 5757 deletions
--- a/.gitignore
+++ b/.gitignore
@ -1,21 +1,26 @@
-.DS_Store
-node_modules
-/dist
-
-
-# local env files
-.env.local
-.env.*.local
-
-# Log files
+# Logs
+logs
+*.log
 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
--- a/.vscode/extensions.json
+++ b/.vscode/extensions.json
@ -0,0 +1,3 @@
+{
+  "recommendations": ["Vue.volar", "Vue.vscode-typescript-vue-plugin"]
+}
--- a/README.md
+++ b/README.md
@ -1,29 +1,23 @@
-# FileViewer 项目Vue2 demo
+# FileViewer 项目Vue3 demo

-本demo基于vue-cli+js+vue2.x构建，如果您需要vue3版本的demo，请前往main分支。
-
-**适用于Vue2 + Webpack，本集成方法要求最低Webpack版本为5，也就是Vue Cli Service 5.0.0以上，当然，iframe集成没有任何限制**
+本demo基于vite+ts+vue3构建，如果您需要vue2版本的demo，请拉取v2分支。

 > 注意，为了版本稳定性，在iframe集成的场景下，无论是vue2版本还是vue3版本，都建议使用file-viewer3以获得最佳性能。


+
 ## 方式一：iframe集成（推荐）

 iframe集成是我们最推荐的集成方式，可以跳过所有的坑，为您的项目快速集成文件预览能力。


 ### 源码准备
-下载我们的最新版本的file-viewer源码，然后执行`npm build build`，或者`yarn build`。
+下载我们的最新版本的file-viewer源码，然后执行`npm run build`，或者`yarn build`。

 ### 构建产物集成
 然后将构建后的dist目录拷贝到您项目的public目录下。当然也可以放置到任何项目中。本demo只是演示。

-如果您在公网，建议您使用我们的cdn：
-
-https://viewer.flyfish.dev
-
-以获得高效的访问。
-
+如果您在公网，建议您使用我们的cdn：https://viewer.flyfish.dev，以获得高效的访问。
 如果您在内网，可以完全参照本demo进行实施。

 ### 添加iframe标签
@ -31,7 +25,7 @@ https://viewer.flyfish.dev

 1. **使用url控制切换（推荐）**

-这种方式是最便捷的实现方式，适合有文件链接的方案。如果你的文件是**流式传输**或者需要用于上传体验，则不适合该方案。
+  这种方式是最便捷的实现方式，适合有文件链接的方案。如果你的文件是**流式传输**或者需要用于上传体验，则不适合该方案。

 2. **使用postMessage发送文件数据**

@ -40,65 +34,61 @@ https://viewer.flyfish.dev
 示例的`IframeViewer.vue`组件实现如下，该组件同时支持两种文件控制方式，您可以直接集成：

 ```vue
-<template>
-   <iframe title="文档预览" ref="frame" :src="src" class="iframe-viewer"/>
-</template>
+<script setup lang="ts">
+import {computed, nextTick, onMounted, ref} from "vue";

-<script>
+const props = defineProps<{
+    url?: string,
+    file?: File,
+    name?: string,
+}>()

-   // 查看器的源，当前示例为本源，指定为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() {
+// 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 = this.name || '';
-            if (this.url) {
+    const name = props.name || '';
+    if (props.url) {
        // 直接拼接url
-               return `${source}?url=${encodeURIComponent(this.url)}&name=${encodeURIComponent(name)}`
-            } else if (this.file) {
+        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;
    }
-         }
-      },
-      methods: {
-         // 发送文件数据
-         sendFileData() {
-            this.nextTick(() => {
-               // iframe引用
-               const viewer = this.$refs.frame;
-               if (!viewer || !this.file) return;
-               viewer.onload = () => viewer.contentWindow?.postMessage(this.file, viewerOrigin);
+})
+
+// 发送文件数据
+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" />
+</template>
+
 <style scoped>
-   .iframe-viewer {
+.iframe-viewer {
    height: calc(100vh - 2px);
    width: 100%;
    border: 0
-   }
+}
 </style>

 ```
@ -119,54 +109,41 @@ https://viewer.flyfish.dev

 以下是示例代码：

-`main.js`
+`main.ts`

-```javascript
-import Vue from 'vue'
-import FileViewer from '@flyfish-group/file-viewer'
+```typescript
+import { createApp } from 'vue'
+import App from './App.vue'
+import FileViewer from '@flyfish-group/file-viewer3'

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

+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'>
    <file-viewer :url="url" />
  </div>
 </template>

-<script>
-   export default {
-      name: 'InnerViewer',
-      props: {
-         url: String,
-      },
-   }
-</script>
-
 <style scoped>
-   .simple-view {
+.simple-view {
    width: 100%;
    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响应头 |
-
--- a/babel.config.js
+++ b/babel.config.js
@ -1,5 +0,0 @@
-module.exports = {
-  presets: [
-    '@vue/cli-plugin-babel/preset'
-  ]
-}
--- a/env.d.ts
+++ b/env.d.ts
@ -0,0 +1 @@
+/// <reference types="vite/client" />
--- a/index.html
+++ b/index.html
@ -0,0 +1,13 @@
+<!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>
--- a/jsconfig.json
+++ b/jsconfig.json
@ -1,19 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "es5",
-    "module": "esnext",
-    "baseUrl": "./",
-    "moduleResolution": "node",
-    "paths": {
-      "@/*": [
-        "src/*"
-      ]
-    },
-    "lib": [
-      "esnext",
-      "dom",
-      "dom.iterable",
-      "scripthost"
-    ]
-  }
-}
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -1,44 +1,26 @@
 {
-  "name": "file-view-demo-vue2",
-  "version": "0.1.0",
+  "name": "file-view-demo",
+  "version": "0.0.0",
  "private": true,
  "scripts": {
-    "serve": "vue-cli-service serve",
-    "build": "vue-cli-service build",
-    "lint": "vue-cli-service lint"
+    "dev": "vite",
+    "build": "run-p type-check build-only",
+    "preview": "vite preview",
+    "build-only": "vite build",
+    "type-check": "vue-tsc --noEmit"
  },
  "dependencies": {
-    "@flyfish-group/file-viewer": "^1.0.4",
-    "core-js": "^3.8.3",
-    "vue": "^2.6.14"
+    "@flyfish-group/file-viewer3": "^1.0.2",
+    "vue": "^3.2.47"
  },
  "devDependencies": {
-    "@babel/core": "^7.12.16",
-    "@babel/eslint-parser": "^7.12.16",
-    "@vue/cli-plugin-babel": "~5.0.0",
-    "@vue/cli-plugin-eslint": "~5.0.0",
-    "@vue/cli-service": "~5.0.0",
-    "eslint": "^7.32.0",
-    "eslint-plugin-vue": "^8.0.3",
-    "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"
-  ]
+    "@types/node": "^18.14.2",
+    "@vitejs/plugin-vue": "^4.0.0",
+    "@vitejs/plugin-vue-jsx": "^3.0.0",
+    "@vue/tsconfig": "^0.1.3",
+    "npm-run-all": "^4.1.5",
+    "typescript": "~4.8.4",
+    "vite": "^4.1.4",
+    "vue-tsc": "^1.2.0"
+  }
 }
--- a/public/index.html
+++ b/public/index.html
@ -1,17 +0,0 @@
-<!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>
--- a/src/App.vue
+++ b/src/App.vue
@ -1,3 +1,17 @@
+<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>
@ -27,33 +41,6 @@
  </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;
--- a/src/assets/666.pdf
+++ b/src/assets/666.pdf
--- a/src/assets/888.pdf
+++ b/src/assets/888.pdf
--- a/src/assets/excel.xlsx
+++ b/src/assets/excel.xlsx
--- a/src/assets/logo.png
+++ b/src/assets/logo.png
--- a/src/assets/logo.svg
+++ b/src/assets/logo.svg
@ -0,0 +1 @@
+<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>
--- a/src/components/IframeViewer.vue
+++ b/src/components/IframeViewer.vue
@ -1,56 +1,52 @@
-<template>
-  <iframe title="文档预览" ref="frame" :src="src" class="iframe-viewer"/>
-</template>
+<script setup lang="ts">
+import {computed, nextTick, onMounted, ref} from "vue";

-<script>
-
-// 查看器的源，当前示例为本源，指定为location.origin即可
-const viewerOrigin = location.origin;
+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'
-
-export default {
-  name: 'IframeViewer',
-  props: {
-    url: String,
-    file: File,
-    name: String,
-  },
-  mounted() {
-    this.sendFileData();
-  },
-  computed: {
-    // 构建完整url
-    src() {
+// 查看器的源，当前示例为本源，指定为location.origin即可
+const viewerOrigin = location.origin;
+// 构建完整url
+const src = computed(() => {
    // 文件名称，建议传递，提高体验性
-      const name = this.name || '';
-      if (this.url) {
+    const name = props.name || '';
+    if (props.url) {
        // 直接拼接url
-        return `${source}?url=${encodeURIComponent(this.url)}&name=${encodeURIComponent(name)}`
-      } else if (this.file) {
+        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;
    }
-    }
-  },
-  methods: {
-    // 发送文件数据
-    sendFileData() {
-      this.nextTick(() => {
-        // iframe引用
-        const viewer = this.$refs.frame;
-        if (!viewer || !this.file) return;
-        viewer.onload = () => viewer.contentWindow?.postMessage(this.file, viewerOrigin);
+})
+
+// 发送文件数据
+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" />
+</template>
+
 <style scoped>
 .iframe-viewer {
    height: calc(100vh - 2px);
--- a/src/components/InnerViewer.vue
+++ b/src/components/InnerViewer.vue
@ -1,18 +1,17 @@
+<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%;
--- a/src/main.js
+++ b/src/main.js
@ -1,14 +0,0 @@
-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')
--- a/src/main.ts
+++ b/src/main.ts
@ -0,0 +1,8 @@
+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')
--- a/tsconfig.json
+++ b/tsconfig.json
@ -0,0 +1,16 @@
+{
+  "extends": "@vue/tsconfig/tsconfig.web.json",
+  "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+
+  "references": [
+    {
+      "path": "./tsconfig.node.json"
+    }
+  ]
+}
--- a/tsconfig.node.json
+++ b/tsconfig.node.json
@ -0,0 +1,8 @@
+{
+  "extends": "@vue/tsconfig/tsconfig.node.json",
+  "include": ["vite.config.*", "vitest.config.*", "cypress.config.*", "playwright.config.*"],
+  "compilerOptions": {
+    "composite": true,
+    "types": ["node"]
+  }
+}
--- a/vite.config.ts
+++ b/vite.config.ts
@ -0,0 +1,21 @@
+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))
+        }
+    }
+})
--- a/vue.config.js
+++ b/vue.config.js
@ -1,7 +0,0 @@
-const { defineConfig } = require('@vue/cli-service')
-module.exports = defineConfig({
-  // 我们使用根节点，如果使用其他子目录，请设置具体的路径映射
-  publicPath: '/',
-  // 默认转换依赖
-  transpileDependencies: true
-})
--- a/yarn.lock
+++ b/yarn.lock
				`@ -0,0 +1 @@`
				`<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>`