feat: vue2版本示例，详细demo

README.md

@@ -1,24 +1,172 @@
-# file-view-demo-vue2
+# FileViewer 项目Vue2 demo
+
+本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 build build`，或者`yarn build`。
+
+### 构建产物集成
+然后将构建后的dist目录拷贝到您项目的public目录下。当然也可以放置到任何项目中。本demo只是演示。
+
+如果您在公网，建议您使用我们的cdn：
+
+https://viewer.flyfish.dev
+
+以获得高效的访问。
+
+如果您在内网，可以完全参照本demo进行实施。
+
+### 添加iframe标签
+您可以实现一个组件，内部包含一个`<iframe>`标签，接下来您有两种方法进行文件切换。
+
+1. **使用url控制切换（推荐）**
+
+这种方式是最便捷的实现方式，适合有文件链接的方案。如果你的文件是**流式传输**或者需要用于上传体验，则不适合该方案。
+
+2. **使用postMessage发送文件数据**
+
+   这种方式适合本地上传或者后端返回流式二进制数据。
+
+示例的`IframeViewer.vue`组件实现如下，该组件同时支持两种文件控制方式，您可以直接集成：
+
+```vue
+<template>
+   <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 {
+      height: calc(100vh - 2px);
+      width: 100%;
+      border: 0
+   }
+</style>
 
-## Project setup
-```
-yarn install
 ```
 
-### Compiles and hot-reloads for development
+
-```
+
-yarn serve
+## 方式二： 使用仓库依赖集成
+
+该方案适合有定制化需求，或者想要控制显示样式或者灵活控制渲染的开发需求。
+
+为了您能够快速集成本项目，我们在中央仓库发布了我们的NPM包。具体地址如下：
+
+- [Vue2版本](https://www.npmjs.com/package/@flyfish-group/file-viewer)
+
+- [Vue3版本](https://www.npmjs.com/package/@flyfish-group/file-viewer3)
+
+您可以根据项目架构快速选用组件。
+
+以下是示例代码：
+
+`main.js`
+
+```javascript
+import Vue from 'vue'
+import FileViewer from '@flyfish-group/file-viewer'
+
+// 导入样式
+import '@flyfish-group/file-viewer/dist/style.css'
+
+Vue.use(FileViewer);
+
+new Vue({
+   render: h => h(App),
+}).$mount('#app')
+
 ```
 
-### Compiles and minifies for production
+`InnerViewer.vue`
-```
+
-yarn build
+```vue
+<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%;
+      height: calc(100vh - 2px);
+   }
+</style>
+
 ```
 
-### Lints and fixes files
+需要注意的是，内置组件`file-viewer`支持使用data的方式传入文件的二进制数据，您可以自行从服务器拉取集成。以下是组件API。
-```
+
-yarn lint
+| 属性名 | 类型                        | 示例                         | 属性描述                                                  |
-```
+| ------ | --------------------------- | ---------------------------- | --------------------------------------------------------- |
+| file   | File \| Blob \| ArrayBuffer | new Blob(...)                | 支持文件、二进制blob和arraybuffer数组缓存                 |
+| url    | String                      | "https://flyfish.dev/1.docx" | 支持任意服务器文件url，需要支持跨域访问，即存在cors响应头 |
 
-### Customize configuration
-See [Configuration Reference](https://cli.vuejs.org/config/).

package.json

@@ -8,6 +8,7 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "@flyfish-group/file-viewer": "^1.0.4",
     "core-js": "^3.8.3",
     "vue": "^2.6.14"
   },

public/dist/assets/PptxRender-846be824.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.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/_commonjs-dynamic-modules-302442b1.js

@@ -0,0 +1 @@
+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/dist/assets/index-b9d6ea81.css

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

@@ -0,0 +1 @@
+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/dist/index.html

@@ -0,0 +1,15 @@
+<!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-be50c070.js"></script>
+    <link rel="stylesheet" href="./assets/index-b9d6ea81.css">
+  </head>
+  <body>
+    <div id="app"></div>
+    
+  </body>
+</html>

src/App.vue

@@ -1,28 +1,79 @@
+
 <template>
-  <div id="app">
+  <header>
-    <img alt="Vue logo" src="./assets/logo.png">
+    <div class="tool-bar">
-    <HelloWorld msg="Welcome to Your Vue.js App"/>
+      <div>
-  </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">
+          <optgroup label="excel">
+            <option :value="excel">常规excel</option>
+          </optgroup>
+          <optgroup label="pdf">
+            <option :value="pdf1">复杂pdf</option>
+            <option :value="pdf2">简单pdf</option>
+          </optgroup>
+        </select>
+      </div>
+    </div>
+    <div class="wrapper">
+      <InnerViewer v-if="mode === 'inner'" :url="url" />
+      <IframeViewer v-else-if="mode === 'embedded'" :url="url" />
+    </div>
+  </header>
 </template>
 
 <script>
-import HelloWorld from './components/HelloWorld.vue'
+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: {
-    HelloWorld
+    InnerViewer,
+    IframeViewer
   }
 }
 </script>
 
-<style>
+<style scoped>
-#app {
+header {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
-  -webkit-font-smoothing: antialiased;
+}
-  -moz-osx-font-smoothing: grayscale;
+
-  text-align: center;
+.tool-bar {
-  color: #2c3e50;
+  background-color: hsla(160, 100%, 37%, 0.2);
-  margin-top: 60px;
+  width: 230px;
+  height: 100vh;
+  padding-left: 8px;
+}
+
+@media (min-width: 1024px) {
+  header {
+    display: flex;
+    position: relative;
+  }
+
+  header .wrapper {
+    flex: 1;
+  }
 }
 </style>

src/assets/main.css

@@ -0,0 +1,33 @@
+#app {
+  width: 100%;
+  font-weight: normal;
+}
+
+body {
+  margin: 0;
+  padding: 0;
+}
+
+a,
+.green {
+  text-decoration: none;
+  color: hsla(160, 100%, 37%, 1);
+  transition: 0.4s;
+}
+
+@media (hover: hover) {
+  a:hover {
+    background-color: hsla(160, 100%, 37%, 0.2);
+  }
+}
+
+@media (min-width: 1024px) {
+  body {
+    display: flex;
+    place-items: center;
+  }
+
+  #app {
+    display: block;
+  }
+}

src/components/HelloWorld.vue

@@ -1,58 +0,0 @@
-<template>
-  <div class="hello">
-    <h1>{{ msg }}</h1>
-    <p>
-      For a guide and recipes on how to configure / customize this project,<br>
-      check out the
-      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
-    </p>
-    <h3>Installed CLI Plugins</h3>
-    <ul>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
-    </ul>
-    <h3>Essential Links</h3>
-    <ul>
-      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
-      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
-      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
-      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
-      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
-    </ul>
-    <h3>Ecosystem</h3>
-    <ul>
-      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
-      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
-      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
-      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
-      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
-    </ul>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'HelloWorld',
-  props: {
-    msg: String
-  }
-}
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
-h3 {
-  margin: 40px 0 0;
-}
-ul {
-  list-style-type: none;
-  padding: 0;
-}
-li {
-  display: inline-block;
-  margin: 0 10px;
-}
-a {
-  color: #42b983;
-}
-</style>

src/components/IframeViewer.vue

@@ -0,0 +1,60 @@
+<template>
+  <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 {
+  height: calc(100vh - 2px);
+  width: 100%;
+  border: 0
+}
+</style>

src/components/InnerViewer.vue

@@ -0,0 +1,21 @@
+<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%;
+    height: calc(100vh - 2px);
+}
+</style>

src/main.js

@@ -1,8 +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')

vue.config.js

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