README.md

@@ -1,149 +1,40 @@
-# FileViewer 项目Vue3 demo
+# file-view-demo
 
-本demo基于vite+ts+vue3构建，如果您需要vue2版本的demo，请拉取v2分支。
+This template should help get you started developing with Vue 3 in Vite.
 
-> 注意，为了版本稳定性，在iframe集成的场景下，无论是vue2版本还是vue3版本，都建议使用file-viewer3以获得最佳性能。
+## Recommended IDE Setup
 
+[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
 
-## 方式一：iframe集成（推荐）
+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:
 
+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 run build`，或者`yarn build`。
 
-### 构建产物集成
+See [Vite Configuration Reference](https://vitejs.dev/config/).
-然后将构建后的dist目录拷贝到您项目的public目录下。当然也可以放置到任何项目中。本demo只是演示。
 
-如果您在公网，建议您使用我们的cdn：https://viewer.flyfish.dev，以获得高效的访问。
+## Project Setup
-如果您在内网，可以完全参照本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')
 ```
 
-`InnerViewer.vue`
+### Type-Check, Compile and Minify for Production
-
-```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,6 @@
     "type-check": "vue-tsc --noEmit"
   },
   "dependencies": {
-    "@flyfish-group/file-viewer3": "^1.0.2",
     "vue": "^3.2.47"
   },
   "devDependencies": {

public/dist/assets/PptxRender-846be824.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.10.3
- */.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{shape-rendering:crispEdges}.bb-chart-arcs .bb-needle{fill:#000}.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 rect{fill:#4682b4;fill-opacity:.1}.bb-region.selected rect{fill:#27c903}.bb-zoom-brush,.bb-brush .extent{fill-opacity:.1}.bb-legend-item{-webkit-user-select:none;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;-webkit-user-select:none;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;white-space:nowrap}.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/dist/assets/index-b9d6ea81.css

@@ -1 +0,0 @@
-.banner[data-v-3f8fdb10]{overflow:auto;text-align:center;background-color:#12b6ff;color:#fff}.viewport[data-v-3f8fdb10]{border:1px solid #ccc;margin:5px;width:calc(100% - 12px);height:calc(100vh - 73px)}.hidden .banner[data-v-3f8fdb10]{display:none}.hidden .viewport[data-v-3f8fdb10]{height:100vh!important}.hidden .well[data-v-3f8fdb10]{height:calc(100vh - 12px)}.overlay[data-v-3f8fdb10]{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-3f8fdb10]:hover{opacity:1}.file-select[data-v-3f8fdb10]{position:absolute;left:5%;line-height:35px;margin-left:20px}.banner a[data-v-3f8fdb10]{color:#fff;text-decoration:none}.banner h1[data-v-3f8fdb10]{font-size:20px;line-height:2;margin:.5em 0}.file-select button[data-v-3f8fdb10]{background:#fafafa}.overlay button[data-v-3f8fdb10]{background:#12b6ff;color:#fff}button[data-v-3f8fdb10]{outline:none;border-radius:20px;border:1px solid #e3e3e3;line-height:19px;padding:5px 12px;cursor:pointer}.overlay input[type=text][data-v-3f8fdb10]{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-3f8fdb10]{position:absolute;opacity:0;width:100%;height:100%;left:0;top:0;z-index:2;cursor:pointer}.upload-cover[data-v-3f8fdb10]{z-index:1;pointer-events:none;color:#000}.messages .warning[data-v-3f8fdb10]{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/dist/assets/worker-ref-b3abaee8.js

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

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

@@ -0,0 +1,9 @@
+.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/index-1f7d529c.css

@@ -0,0 +1 @@
+.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

@@ -0,0 +1 @@
+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

@@ -5,8 +5,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-be50c070.js"></script>
+    <script type="module" crossorigin src="./assets/index-0fd2d185.js"></script>
-    <link rel="stylesheet" href="./assets/index-b9d6ea81.css">
+    <link rel="stylesheet" href="./assets/index-1f7d529c.css">
   </head>
   <body>
     <div id="app"></div>

src/App.vue

@@ -1,26 +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>
     <div class="tool-bar">
-      <div>
-        <h3>选择预览模式</h3>
-        <input type="radio" name="mode" value="inner" v-model="mode" />内置访问
-        <input type="radio" name="mode" value="embedded" v-model="mode" />iframe访问
-      </div>
       <div>
         <h3>选择文档</h3>
         <select v-model="url">
@@ -35,8 +26,7 @@ const mode = ref<string>('inner');
       </div>
     </div>
     <div class="wrapper">
-      <InnerViewer v-if="mode === 'inner'" :url="url" />
+      <IframeViewer :url="url" />
-      <IframeViewer v-else-if="mode === 'embedded'" :url="url" />
     </div>
   </header>
 </template>

src/components/IframeViewer.vue

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

src/components/InnerViewer.vue

@@ -1,20 +0,0 @@
-<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>

src/main.ts

@@ -1,8 +1,6 @@
 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')
+createApp(App).mount('#app')

vite.config.ts

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