feat: 更新代码

README.md

@@ -1,40 +1,149 @@
-# file-view-demo
+# FileViewer 项目Vue3 demo
 
-This template should help get you started developing with Vue 3 in Vite.
+本demo基于vite+ts+vue3构建，如果您需要vue2版本的demo，请拉取v2分支。
 
-## Recommended IDE Setup
+> 注意，为了版本稳定性，在iframe集成的场景下，无论是vue2版本还是vue3版本，都建议使用file-viewer3以获得最佳性能。
 
-[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).
 
-## Type Support for `.vue` Imports in TS
 
-TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin) to make the TypeScript language service aware of `.vue` types.
+## 方式一：iframe集成（推荐）
 
-If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a [Take Over Mode](https://github.com/johnsoncodehk/volar/discussions/471#discussioncomment-1361669) that is more performant. You can enable it by the following steps:
+iframe集成是我们最推荐的集成方式，可以跳过所有的坑，为您的项目快速集成文件预览能力。
 
-1. Disable the built-in TypeScript Extension
-    1) Run `Extensions: Show Built-in Extensions` from VSCode's command palette
-    2) Find `TypeScript and JavaScript Language Features`, right click and select `Disable (Workspace)`
-2. Reload the VSCode window by running `Developer: Reload Window` from the command palette.
 
-## Customize configuration
+### 源码准备
+下载我们的最新版本的file-viewer源码，然后执行`npm build build`，或者`yarn build`。
 
-See [Vite Configuration Reference](https://vitejs.dev/config/).
+### 构建产物集成
+然后将构建后的dist目录拷贝到您项目的public目录下。当然也可以放置到任何项目中。本demo只是演示。
 
-## Project Setup
+如果您在公网，建议您使用我们的cdn：https://viewer.flyfish.dev，以获得高效的访问。
+如果您在内网，可以完全参照本demo进行实施。
+
+### 添加iframe标签
+您可以实现一个组件，内部包含一个`<iframe>`标签，接下来您有两种方法进行文件切换。
+
+1. **使用url控制切换（推荐）**
+
+  这种方式是最便捷的实现方式，适合有文件链接的方案。如果你的文件是**流式传输**或者需要用于上传体验，则不适合该方案。
+
+2. **使用postMessage发送文件数据**
+
+   这种方式适合本地上传或者后端返回流式二进制数据。
+
+示例的`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" />
+</template>
+
+<style scoped>
+.iframe-viewer {
+    height: calc(100vh - 2px);
+    width: 100%;
+    border: 0
+}
+</style>
 
-```sh
-yarn
 ```
 
-### Compile and Hot-Reload for Development
 
-```sh
-yarn dev
+
+## 方式二： 使用仓库依赖集成
+
+该方案适合有定制化需求，或者想要控制显示样式或者灵活控制渲染的开发需求。
+
+为了您能够快速集成本项目，我们在中央仓库发布了我们的NPM包。具体地址如下：
+
+- [Vue2版本](https://www.npmjs.com/package/@flyfish-group/file-viewer)
+
+- [Vue3版本](https://www.npmjs.com/package/@flyfish-group/file-viewer3)
+
+您可以根据项目架构快速选用组件。
+
+以下是示例代码：
+
+`main.ts`
+
+```typescript
+import { createApp } from 'vue'
+import App from './App.vue'
+import FileViewer from '@flyfish-group/file-viewer3'
+
+import '@flyfish-group/file-viewer3/dist/style.css'
+
+createApp(App).use(FileViewer).mount('#app')
 ```
 
-### Type-Check, Compile and Minify for Production
+`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>
+
+<style scoped>
+.simple-view {
+    width: 100%;
+    height: calc(100vh - 2px);
+}
+</style>
 
-```sh
-yarn build
 ```
+

package.json

@@ -10,7 +10,7 @@
     "type-check": "vue-tsc --noEmit"
   },
   "dependencies": {
-    "file-viewer3": "^1.0.7",
+    "@flyfish-group/file-viewer3": "^1.0.2",
     "vue": "^3.2.47"
   },
   "devDependencies": {

public/file-viewer3/assets/PptxRender-dce7f53f.css

@@ -1,9 +0,0 @@
-.slide{position:relative;border:1px solid #333;border-radius:10px;overflow:hidden;margin-bottom:50px;margin-left:auto;margin-right:auto;z-index:100}.slide div.block{position:absolute;top:0;left:0;width:100%;line-height:1}.slide div.content,.slide div.diagram-content{display:flex;flex-direction:column}.slide div.content-rtl{display:flex;flex-direction:column;direction:rtl}.slide .pregraph-rtl{direction:rtl}.slide .pregraph-ltr{direction:ltr}.slide .pregraph-inherit{direction:inherit}.slide .slide-prgrph{width:100%}.slide .line-break-br:before{content:"\a";white-space:pre}.slide div.v-up{justify-content:flex-start}.slide div.v-mid{justify-content:center}.slide div.v-down{justify-content:flex-end}.slide div.h-left{justify-content:flex-start;align-items:flex-start;text-align:left}.slide div.h-left-rtl{justify-content:flex-end;align-items:flex-end;text-align:left}.slide div.h-mid{justify-content:center;align-items:center;text-align:center}.slide div.h-right{justify-content:flex-end;align-items:flex-end;text-align:right}.slide div.h-right-rtl{justify-content:flex-start;align-items:flex-start;text-align:right}.slide div.h-just,.slide div.h-dist{text-align:justify}.slide div.up-left{justify-content:flex-start;align-items:flex-start;text-align:left}.slide div.up-center{justify-content:flex-start;align-items:center}.slide div.up-right{justify-content:flex-start;align-items:flex-end}.slide div.center-left{justify-content:center;align-items:flex-start;text-align:left}.slide div.center-center{justify-content:center;align-items:center}.slide div.center-right{justify-content:center;align-items:flex-end}.slide div.down-left{justify-content:flex-end;align-items:flex-start;text-align:left}.slide div.down-center{justify-content:flex-end;align-items:center}.slide div.down-right{justify-content:flex-end;align-items:flex-end}.slide li.slide{margin:10px 0;font-size:18px}.slide table{position:absolute}.slide svg.drawing{position:absolute;overflow:visible}/*!
- * Copyright (c) 2017 ~ present NAVER Corp.
- * billboard.js project is licensed under the MIT license
- *
- * billboard.js, JavaScript chart library
- * https://naver.github.io/billboard.js/
- *
- * @version 3.7.5
- */.bb-color-pattern{background-image:url(#00c73c;#fa7171;#2ad0ff;#7294ce;#e3e448;#cc7e6e;#fb6ccf;#c98dff;#4aea99;#bbbbbb;)}.bb svg{font-size:12px;font-family:sans-serif,Arial,nanumgothic,Dotum;line-height:1}.bb path,.bb line{fill:none;stroke:#c4c4c4}.bb text,.bb .bb-button{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;fill:#555;font-size:11px}.bb-legend-item-title,.bb-xgrid-focus,.bb-ygrid-focus,.bb-ygrid,.bb-event-rect,.bb-bars path{shape-rendering:crispEdges}.bb-axis{shape-rendering:crispEdges}.bb-axis-y text,.bb-axis-y2 text{fill:#737373}.bb-event-rects{fill-opacity:1!important}.bb-event-rects .bb-event-rect{fill:transparent}.bb-event-rects .bb-event-rect._active_{fill:#27c9030d}.tick._active_ text{fill:#00c83c!important}.bb-grid{pointer-events:none}.bb-grid line{stroke:#f1f1f1}.bb-xgrid-focus line,.bb-ygrid-focus line{stroke:#ddd}.bb-text.bb-empty{fill:#767676}.bb-line{stroke-width:1px}.bb-circle._expanded_{fill:#fff!important;stroke-width:2px;stroke:red}rect.bb-circle._expanded_,use.bb-circle._expanded_{stroke-width:1px}.bb-selected-circle{fill:#fff;stroke-width:2px}.bb-bar{stroke-width:0}.bb-bar._expanded_{fill-opacity:.75}.bb-candlestick{stroke-width:1px}.bb-candlestick._expanded_{fill-opacity:.75}.bb-target.bb-focused,.bb-circles.bb-focused{opacity:1}.bb-target.bb-focused path.bb-line,.bb-target.bb-focused path.bb-step,.bb-circles.bb-focused path.bb-line,.bb-circles.bb-focused path.bb-step{stroke-width:2px}.bb-target.bb-defocused,.bb-circles.bb-defocused{opacity:.3!important}.bb-target.bb-defocused .text-overlapping,.bb-circles.bb-defocused .text-overlapping{opacity:.05!important}.bb-region{fill:#4682b4;fill-opacity:.1}.bb-region.selected rect{fill:#27c903}.bb-zoom-brush,.bb-brush .extent{fill-opacity:.1}.bb-legend-item{user-select:none}.bb-legend-item-hidden{opacity:.15}.bb-legend-background{opacity:.75;fill:#fff;stroke:#d3d3d3;stroke-width:1}.bb-title{font-size:14px}.bb-chart-treemaps rect{stroke:#fff;stroke-width:1px}.bb-tooltip-container{z-index:10;font-family:sans-serif,Arial,nanumgothic,Dotum;user-select:none}.bb-tooltip{border-collapse:separate;border-spacing:0;empty-cells:show;border:1px solid #999;background-color:#fff;text-align:left;font-size:11px}.bb-tooltip th{font-size:12px;padding:4px 8px;text-align:left;border-bottom:solid 1px #eee}.bb-tooltip td{padding:4px 6px;background-color:#fff}.bb-tooltip td:first-child{padding-left:8px}.bb-tooltip td:last-child{padding-right:8px}.bb-tooltip td>span,.bb-tooltip td>svg{display:inline-block;width:10px;height:10px;margin-right:6px;border-radius:5px;vertical-align:middle}.bb-tooltip td.value{border-left:1px solid transparent}.bb-tooltip .bb-tooltip-title{display:inline-block;color:#aaa;line-height:20px}.bb-tooltip .bb-tooltip-detail table{border-collapse:collapse;border-spacing:0}.bb-tooltip .bb-tooltip-detail .bb-tooltip-name,.bb-tooltip .bb-tooltip-detail .bb-tooltip-value{font-size:11px;line-height:13px;padding:4px 0 3px;color:#444;text-align:left;font-weight:400}.bb-tooltip .bb-tooltip-detail .bb-tooltip-value{padding-left:5px;font-weight:800;font-size:12px}.bb-area{stroke-width:0;opacity:.2}.bb-chart-arcs-title{dominant-baseline:middle;font-size:1.3em}text.bb-chart-arcs-gauge-title{dominant-baseline:middle;font-size:2.7em}.bb-chart-arcs .bb-chart-arcs-background{fill:#e0e0e0;stroke:none}.bb-chart-arcs .bb-chart-arcs-gauge-unit{fill:#000;font-size:16px}.bb-chart-arcs .bb-chart-arcs-gauge-min,.bb-chart-arcs .bb-chart-arcs-gauge-max{fill:#777}.bb-chart-arcs .bb-chart-arcs-title{font-size:16px!important;fill:#000;font-weight:600}.bb-chart-arcs path.empty{fill:#eaeaea;stroke-width:0}.bb-chart-arcs .bb-levels circle{fill:none;stroke:#848282;stroke-width:.5px}.bb-chart-arcs .bb-levels text{fill:#848282}.bb-chart-arc .bb-gauge-value{fill:#000}.bb-chart-arc path{stroke:#fff}.bb-chart-arc rect{stroke:#fff;stroke-width:1}.bb-chart-arc text{fill:#fff;font-size:13px}.bb-chart-radars .bb-levels polygon{fill:none;stroke:#848282;stroke-width:.5px}.bb-chart-radars .bb-levels text{fill:#848282}.bb-chart-radars .bb-axis line{stroke:#848282;stroke-width:.5px}.bb-chart-radars .bb-axis text{font-size:1.15em;cursor:default}.bb-chart-radars .bb-shapes polygon{fill-opacity:.2;stroke-width:1px}.bb-button{position:absolute;top:10px;right:10px}.bb-button .bb-zoom-reset{border:solid 1px #ccc;background-color:#fff;padding:5px;border-radius:5px;cursor:pointer}.pptx-wrapper[data-v-1b0d57cb]{max-width:100%;margin:0 auto}

public/file-viewer3/assets/_commonjs-dynamic-modules-302442b1.js

@@ -1 +0,0 @@
-function r(o){throw new Error('Could not dynamically require "'+o+'". Please configure the dynamicRequireTargets or/and ignoreDynamicRequires option of @rollup/plugin-commonjs appropriately for this require call to work.')}export{r as c};

public/file-viewer3/assets/index-1f7d529c.css

@@ -1 +0,0 @@
-.banner[data-v-efe72cc6]{overflow:auto;text-align:center;background-color:#12b6ff;color:#fff}.viewport[data-v-efe72cc6]{border:1px solid #ccc;margin:5px;width:calc(100% - 12px);height:calc(100vh - 73px)}.hidden .banner[data-v-efe72cc6]{display:none}.hidden .viewport[data-v-efe72cc6]{height:100vh!important}.hidden .well[data-v-efe72cc6]{height:calc(100vh - 12px)}.overlay[data-v-efe72cc6]{position:absolute;transition:all;z-index:1000;opacity:.4;top:50px;left:112px;padding:20px;border-radius:5px;background:white;border:1px solid silver}.overlay[data-v-efe72cc6]:hover{opacity:1}.file-select[data-v-efe72cc6]{position:absolute;left:5%;line-height:35px;margin-left:20px}.banner a[data-v-efe72cc6]{color:#fff;text-decoration:none}.banner h1[data-v-efe72cc6]{font-size:20px;line-height:2;margin:.5em 0}.file-select button[data-v-efe72cc6]{background:#fafafa}.overlay button[data-v-efe72cc6]{background:#12b6ff;color:#fff}button[data-v-efe72cc6]{outline:none;border-radius:20px;border:1px solid #e3e3e3;line-height:19px;padding:5px 12px;cursor:pointer}.overlay input[type=text][data-v-efe72cc6]{line-height:19px;height:30px;width:300px;outline:none;border:1px solid silver;border-radius:6px;margin-right:10px}.overlay input[type=file][data-v-efe72cc6]{position:absolute;opacity:0;width:100%;height:100%;left:0;top:0;z-index:2;cursor:pointer}.upload-cover[data-v-efe72cc6]{z-index:1;pointer-events:none;color:#000}.messages .warning[data-v-efe72cc6]{color:#c60}html{overflow-y:scroll;font-family:helvetica,arial,sans-serif}body{margin:0;padding:0}#app{width:100%;height:100%}#app{width:100%;font-weight:400}.code-area[data-v-3be501eb]{display:block;margin:0 auto;font-size:12px;width:1000px;min-height:500px;background:#1f1f1f;word-break:break-word;white-space:break-spaces;color:#5af117}.file-viewer[data-v-4732f9f2]{position:relative;width:100%;height:100%}.content[data-v-4732f9f2]{display:block;background-color:#f2f2f2;width:100%;height:100%;overflow:auto}.loading[data-v-4732f9f2]{text-align:center;padding-top:50px}.name[data-v-4732f9f2]{position:absolute;bottom:0;left:0;width:100%;padding:13px 0;font-size:20px;text-shadow:2px 2px #616161;pointer-events:none;color:#fff;background:rgba(31,31,31,.22);text-align:center;z-index:10000}.file-render{width:100%;height:100%}

public/file-viewer3/assets/worker-ref-fadf3283.js

@@ -1 +0,0 @@
-var t=Object.defineProperty;var s=(e,r,o)=>r in e?t(e,r,{enumerable:!0,configurable:!0,writable:!0,value:o}):e[r]=o;var l=(e,r,o)=>(s(e,typeof r!="symbol"?r+"":r,o),o);const n="/node_modules/file-viewer3/dist/worker/";class u{constructor(r){l(this,"worker",null);this.worker=r}defaults(r){return this.worker||r()}}function w(e,r=!1){let o=null;return`${n}${e}`,new u(o)}export{w as r};

public/file-viewer3/index.html

@@ -1,15 +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>File Viewer在线预览器vue3.0版本</title>
-    <script type="module" crossorigin src="./assets/index-0fd2d185.js"></script>
-    <link rel="stylesheet" href="./assets/index-1f7d529c.css">
-  </head>
-  <body>
-    <div id="app"></div>
-    
-  </body>
-</html>

src/components/IframeViewer.vue

@@ -10,8 +10,8 @@ const props = defineProps<{
 // iframe引用
 const frame = ref<HTMLIFrameElement>();
 // iframe路径指向构建产物，这里是/，因为放在了public下面
-// 如果使用cdn，请使用http://viewer.flyfish.group
-const source = '/file-viewer3/index.html'
+// 如果使用cdn，请使用https://viewer.flyfish.dev
+const source = '/dist/index.html'
 // 查看器的源，当前示例为本源，指定为location.origin即可
 const viewerOrigin = location.origin;
 // 构建完整url

src/main.ts

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

vite.config.ts

@@ -10,7 +10,7 @@ export default defineConfig({
     base: './',
     optimizeDeps: {
         include: [
-            './node_modules/file-viewer3/dist/components',
+            './node_modules/@flyfish-group/file-viewer3/dist/components',
         ],
     },
     resolve: {