Compare commits

...

No commits in common. "main" and "iframe" have entirely different histories.
main ... iframe

46 changed files with 1975 additions and 3585 deletions

153
README.md
View File

@ -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只是演示。
如果您在公网建议您使用我们的cdnhttps://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
``` ```

2612
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

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

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -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}

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -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%}

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -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};

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -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}

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -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%}

View File

Before

Width:  |  Height:  |  Size: 47 KiB

After

Width:  |  Height:  |  Size: 47 KiB

File diff suppressed because one or more lines are too long

View File

@ -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};

View File

Before

Width:  |  Height:  |  Size: 15 KiB

After

Width:  |  Height:  |  Size: 15 KiB

File diff suppressed because one or more lines are too long

View File

Before

Width:  |  Height:  |  Size: 4.2 KiB

After

Width:  |  Height:  |  Size: 4.2 KiB

View File

@ -5,8 +5,8 @@
<link rel="icon" href="./favicon.ico"> <link rel="icon" href="./favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>File Viewer在线预览器vue3.0版本</title> <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> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>

View File

@ -1,26 +1,17 @@
<script setup lang="ts"> <script setup lang="ts">
import {ref} from "vue"; import {ref} from "vue";
import InnerViewer from './components/InnerViewer.vue'
import IframeViewer from "./components/IframeViewer.vue"; import IframeViewer from "./components/IframeViewer.vue";
import excel from '@/assets/excel.xlsx?url' import excel from '@/assets/excel.xlsx?url'
import pdf1 from '@/assets/666.pdf?url' import pdf1 from '@/assets/666.pdf?url'
import pdf2 from '@/assets/888.pdf?url' import pdf2 from '@/assets/888.pdf?url'
// url // url
const url = ref<string>(excel); const url = ref<string>(excel);
// innerembedded
const mode = ref<string>('inner');
</script> </script>
<template> <template>
<header> <header>
<div class="tool-bar"> <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> <div>
<h3>选择文档</h3> <h3>选择文档</h3>
<select v-model="url"> <select v-model="url">
@ -35,8 +26,7 @@ const mode = ref<string>('inner');
</div> </div>
</div> </div>
<div class="wrapper"> <div class="wrapper">
<InnerViewer v-if="mode === 'inner'" :url="url" /> <IframeViewer :url="url" />
<IframeViewer v-else-if="mode === 'embedded'" :url="url" />
</div> </div>
</header> </header>
</template> </template>

View File

@ -10,8 +10,8 @@ const props = defineProps<{
// iframe // iframe
const frame = ref<HTMLIFrameElement>(); const frame = ref<HTMLIFrameElement>();
// iframe/public // 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 // location.origin
const viewerOrigin = location.origin; const viewerOrigin = location.origin;
// url // url

View File

@ -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>

View File

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

View File

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

1504
yarn.lock

File diff suppressed because it is too large Load Diff