feat: init
This commit is contained in:
commit
03b3de23e3
28
.gitignore
vendored
Normal file
28
.gitignore
vendored
Normal file
@ -0,0 +1,28 @@
|
|||||||
|
# Logs
|
||||||
|
logs
|
||||||
|
*.log
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
pnpm-debug.log*
|
||||||
|
lerna-debug.log*
|
||||||
|
|
||||||
|
node_modules
|
||||||
|
.DS_Store
|
||||||
|
dist
|
||||||
|
dist-ssr
|
||||||
|
coverage
|
||||||
|
*.local
|
||||||
|
|
||||||
|
/cypress/videos/
|
||||||
|
/cypress/screenshots/
|
||||||
|
|
||||||
|
# Editor directories and files
|
||||||
|
.vscode/*
|
||||||
|
!.vscode/extensions.json
|
||||||
|
.idea
|
||||||
|
*.suo
|
||||||
|
*.ntvs*
|
||||||
|
*.njsproj
|
||||||
|
*.sln
|
||||||
|
*.sw?
|
||||||
3
.vscode/extensions.json
vendored
Normal file
3
.vscode/extensions.json
vendored
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
{
|
||||||
|
"recommendations": ["Vue.volar", "Vue.vscode-typescript-vue-plugin"]
|
||||||
|
}
|
||||||
40
README.md
Normal file
40
README.md
Normal file
@ -0,0 +1,40 @@
|
|||||||
|
# file-view-demo
|
||||||
|
|
||||||
|
This template should help get you started developing with Vue 3 in Vite.
|
||||||
|
|
||||||
|
## 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
|
||||||
|
|
||||||
|
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.
|
||||||
|
|
||||||
|
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
|
||||||
|
|
||||||
|
See [Vite Configuration Reference](https://vitejs.dev/config/).
|
||||||
|
|
||||||
|
## Project Setup
|
||||||
|
|
||||||
|
```sh
|
||||||
|
yarn
|
||||||
|
```
|
||||||
|
|
||||||
|
### Compile and Hot-Reload for Development
|
||||||
|
|
||||||
|
```sh
|
||||||
|
yarn dev
|
||||||
|
```
|
||||||
|
|
||||||
|
### Type-Check, Compile and Minify for Production
|
||||||
|
|
||||||
|
```sh
|
||||||
|
yarn build
|
||||||
|
```
|
||||||
13
index.html
Normal file
13
index.html
Normal file
@ -0,0 +1,13 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<link rel="icon" href="/favicon.ico">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>FileViewer3集成示例</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="app"></div>
|
||||||
|
<script type="module" src="/src/main.ts"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
8491
package-lock.json
generated
Normal file
8491
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
27
package.json
Normal file
27
package.json
Normal file
@ -0,0 +1,27 @@
|
|||||||
|
{
|
||||||
|
"name": "file-view-demo",
|
||||||
|
"version": "0.0.0",
|
||||||
|
"private": true,
|
||||||
|
"scripts": {
|
||||||
|
"dev": "vite",
|
||||||
|
"build": "run-p type-check build-only",
|
||||||
|
"preview": "vite preview",
|
||||||
|
"build-only": "vite build",
|
||||||
|
"type-check": "vue-tsc --noEmit"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"axios": "^1.3.6",
|
||||||
|
"file-viewer3": "^1.0.3",
|
||||||
|
"vue": "^3.2.47"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@types/node": "^18.14.2",
|
||||||
|
"@vitejs/plugin-vue": "^4.0.0",
|
||||||
|
"@vitejs/plugin-vue-jsx": "^3.0.0",
|
||||||
|
"@vue/tsconfig": "^0.1.3",
|
||||||
|
"npm-run-all": "^4.1.5",
|
||||||
|
"typescript": "~4.8.4",
|
||||||
|
"vite": "^4.1.4",
|
||||||
|
"vue-tsc": "^1.2.0"
|
||||||
|
}
|
||||||
|
}
|
||||||
BIN
public/favicon.ico
Normal file
BIN
public/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
17
public/file-viewer3/assets/ImageViewer-1106b38d.js
Normal file
17
public/file-viewer3/assets/ImageViewer-1106b38d.js
Normal file
File diff suppressed because one or more lines are too long
9
public/file-viewer3/assets/ImageViewer-86ad1294.css
Normal file
9
public/file-viewer3/assets/ImageViewer-86ad1294.css
Normal file
File diff suppressed because one or more lines are too long
46
public/file-viewer3/assets/MarkdownViewer-07ff3033.js
Normal file
46
public/file-viewer3/assets/MarkdownViewer-07ff3033.js
Normal file
File diff suppressed because one or more lines are too long
1
public/file-viewer3/assets/MarkdownViewer-26784219.css
Normal file
1
public/file-viewer3/assets/MarkdownViewer-26784219.css
Normal file
File diff suppressed because one or more lines are too long
1
public/file-viewer3/assets/PdfView-89e0fbd8.css
Normal file
1
public/file-viewer3/assets/PdfView-89e0fbd8.css
Normal file
File diff suppressed because one or more lines are too long
9
public/file-viewer3/assets/PdfView-ea7f4226.js
Normal file
9
public/file-viewer3/assets/PdfView-ea7f4226.js
Normal file
File diff suppressed because one or more lines are too long
51
public/file-viewer3/assets/PptxRender-3032ddac.js
Normal file
51
public/file-viewer3/assets/PptxRender-3032ddac.js
Normal file
File diff suppressed because one or more lines are too long
9
public/file-viewer3/assets/PptxRender-dce7f53f.css
Normal file
9
public/file-viewer3/assets/PptxRender-dce7f53f.css
Normal 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}
|
||||||
41
public/file-viewer3/assets/XlsxTable-0dea8fc3.css
Normal file
41
public/file-viewer3/assets/XlsxTable-0dea8fc3.css
Normal file
File diff suppressed because one or more lines are too long
218
public/file-viewer3/assets/XlsxTable-23e08fb8.js
Normal file
218
public/file-viewer3/assets/XlsxTable-23e08fb8.js
Normal file
File diff suppressed because one or more lines are too long
@ -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};
|
||||||
96
public/file-viewer3/assets/docx-preview.min-6246d1ca.js
Normal file
96
public/file-viewer3/assets/docx-preview.min-6246d1ca.js
Normal file
File diff suppressed because one or more lines are too long
8
public/file-viewer3/assets/index-0fd2d185.js
Normal file
8
public/file-viewer3/assets/index-0fd2d185.js
Normal file
File diff suppressed because one or more lines are too long
1
public/file-viewer3/assets/index-1f7d529c.css
Normal file
1
public/file-viewer3/assets/index-1f7d529c.css
Normal 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%}
|
||||||
BIN
public/file-viewer3/assets/loading-43b144a3.gif
Normal file
BIN
public/file-viewer3/assets/loading-43b144a3.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 47 KiB |
66
public/file-viewer3/assets/pdf.worker-909112bf.js
Normal file
66
public/file-viewer3/assets/pdf.worker-909112bf.js
Normal file
File diff suppressed because one or more lines are too long
21
public/file-viewer3/assets/pptx.worker-762bd091.js
Normal file
21
public/file-viewer3/assets/pptx.worker-762bd091.js
Normal file
File diff suppressed because one or more lines are too long
1
public/file-viewer3/assets/worker-ref-fadf3283.js
Normal file
1
public/file-viewer3/assets/worker-ref-fadf3283.js
Normal 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};
|
||||||
BIN
public/file-viewer3/assets/xlsx-08add3c8.png
Normal file
BIN
public/file-viewer3/assets/xlsx-08add3c8.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
65
public/file-viewer3/assets/xlsx.worker-b50adc35.js
Normal file
65
public/file-viewer3/assets/xlsx.worker-b50adc35.js
Normal file
File diff suppressed because one or more lines are too long
BIN
public/file-viewer3/favicon.ico
Normal file
BIN
public/file-viewer3/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
15
public/file-viewer3/index.html
Normal file
15
public/file-viewer3/index.html
Normal file
@ -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-0fd2d185.js"></script>
|
||||||
|
<link rel="stylesheet" href="./assets/index-1f7d529c.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="app"></div>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
66
src/App.vue
Normal file
66
src/App.vue
Normal file
@ -0,0 +1,66 @@
|
|||||||
|
<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">
|
||||||
|
<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>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
header {
|
||||||
|
line-height: 1.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tool-bar {
|
||||||
|
background-color: hsla(160, 100%, 37%, 0.2);
|
||||||
|
width: 230px;
|
||||||
|
height: 100vh;
|
||||||
|
padding-left: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 1024px) {
|
||||||
|
header {
|
||||||
|
display: flex;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
header .wrapper {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
BIN
src/assets/666.pdf
Normal file
BIN
src/assets/666.pdf
Normal file
Binary file not shown.
BIN
src/assets/888.pdf
Normal file
BIN
src/assets/888.pdf
Normal file
Binary file not shown.
BIN
src/assets/excel.xlsx
Normal file
BIN
src/assets/excel.xlsx
Normal file
Binary file not shown.
1
src/assets/logo.svg
Normal file
1
src/assets/logo.svg
Normal file
@ -0,0 +1 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 261.76 226.69"><path d="M161.096.001l-30.225 52.351L100.647.001H-.005l130.877 226.688L261.749.001z" fill="#41b883"/><path d="M161.096.001l-30.225 52.351L100.647.001H52.346l78.526 136.01L209.398.001z" fill="#34495e"/></svg>
|
||||||
|
After Width: | Height: | Size: 276 B |
33
src/assets/main.css
Normal file
33
src/assets/main.css
Normal file
@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
57
src/components/IframeViewer.vue
Normal file
57
src/components/IframeViewer.vue
Normal file
@ -0,0 +1,57 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import {computed, nextTick, onMounted, ref, watch} from "vue";
|
||||||
|
import * as url from "url";
|
||||||
|
|
||||||
|
const props = defineProps<{
|
||||||
|
url?: string,
|
||||||
|
file?: File,
|
||||||
|
name?: string,
|
||||||
|
}>()
|
||||||
|
|
||||||
|
// iframe引用
|
||||||
|
const frame = ref<HTMLIFrameElement>();
|
||||||
|
// iframe路径指向构建产物，这里是/，因为放在了public下面
|
||||||
|
// 如果使用cdn，请使用http://viewer.flyfish.group
|
||||||
|
const source = '/file-viewer3/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>
|
||||||
20
src/components/InnerViewer.vue
Normal file
20
src/components/InnerViewer.vue
Normal file
@ -0,0 +1,20 @@
|
|||||||
|
<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>
|
||||||
8
src/main.ts
Normal file
8
src/main.ts
Normal file
@ -0,0 +1,8 @@
|
|||||||
|
import { createApp } from 'vue'
|
||||||
|
import App from './App.vue'
|
||||||
|
import FileViewer from 'file-viewer3';
|
||||||
|
|
||||||
|
import './assets/main.css'
|
||||||
|
import 'file-viewer3/dist/style.css'
|
||||||
|
|
||||||
|
createApp(App).use(FileViewer).mount('#app')
|
||||||
16
tsconfig.json
Normal file
16
tsconfig.json
Normal file
@ -0,0 +1,16 @@
|
|||||||
|
{
|
||||||
|
"extends": "@vue/tsconfig/tsconfig.web.json",
|
||||||
|
"include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
|
||||||
|
"compilerOptions": {
|
||||||
|
"baseUrl": ".",
|
||||||
|
"paths": {
|
||||||
|
"@/*": ["./src/*"]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
"references": [
|
||||||
|
{
|
||||||
|
"path": "./tsconfig.node.json"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
8
tsconfig.node.json
Normal file
8
tsconfig.node.json
Normal file
@ -0,0 +1,8 @@
|
|||||||
|
{
|
||||||
|
"extends": "@vue/tsconfig/tsconfig.node.json",
|
||||||
|
"include": ["vite.config.*", "vitest.config.*", "cypress.config.*", "playwright.config.*"],
|
||||||
|
"compilerOptions": {
|
||||||
|
"composite": true,
|
||||||
|
"types": ["node"]
|
||||||
|
}
|
||||||
|
}
|
||||||
21
vite.config.ts
Normal file
21
vite.config.ts
Normal file
@ -0,0 +1,21 @@
|
|||||||
|
import {fileURLToPath, URL} from 'node:url'
|
||||||
|
|
||||||
|
import {defineConfig} from 'vite'
|
||||||
|
import vue from '@vitejs/plugin-vue'
|
||||||
|
import vueJsx from '@vitejs/plugin-vue-jsx'
|
||||||
|
|
||||||
|
// https://vitejs.dev/config/
|
||||||
|
export default defineConfig({
|
||||||
|
plugins: [vue(), vueJsx()],
|
||||||
|
base: './',
|
||||||
|
optimizeDeps: {
|
||||||
|
include: [
|
||||||
|
'./node_modules/file-viewer3/dist/components',
|
||||||
|
],
|
||||||
|
},
|
||||||
|
resolve: {
|
||||||
|
alias: {
|
||||||
|
'@': fileURLToPath(new URL('./src', import.meta.url))
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
Loading…
Reference in New Issue
Block a user