yaclty/vue-office
1
0
Fork 0
mirror of https://github.com/501351981/vue-office.git synced 2025-07-25 07:41:42 +08:00
Code Issues Packages Projects Releases Wiki Activity

change: 优化高度适应逻辑

Browse Source
This commit is contained in:
liyulin 2023-02-14 19:29:04 +08:00
parent 1bf84cd227
commit af0851f6c4
18 changed files with 132 additions and 99 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
README.md
View File

@ -30,7 +30,11 @@ npm install @vue-office/pdf vue-demi
**使用网络地址预览** **使用网络地址预览**
```vue ```vue
<template> <template>
<vue-office-docx :src="docx" @rendered="rendered"/> <vue-office-docx
:src="docx"
style="height: 100vh;"
@rendered="rendered"
/>
</template> </template>
<script> <script>

16
examples/dist/assets/index-1db1ccb4.css → examples/dist/assets/index-171e346f.css vendored
View File

File diff suppressed because one or more lines are too long

146
examples/dist/assets/index-387877b2.js → examples/dist/assets/index-e6d4b51a.js vendored
View File

File diff suppressed because one or more lines are too long

4
examples/dist/index.html vendored
View File

@ -5,8 +5,8 @@
<link rel="icon" type="image/svg+xml" href="/vue-office/examples/dist/vite.svg" /> <link rel="icon" type="image/svg+xml" href="/vue-office/examples/dist/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + Vue</title> <title>Vite + Vue</title>
<script type="module" crossorigin src="/vue-office/examples/dist/assets/index-387877b2.js"></script> <script type="module" crossorigin src="/vue-office/examples/dist/assets/index-e6d4b51a.js"></script>
<link rel="stylesheet" href="/vue-office/examples/dist/assets/index-1db1ccb4.css"> <link rel="stylesheet" href="/vue-office/examples/dist/assets/index-171e346f.css">
</head> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>

3
examples/src/App.vue
View File

@ -26,5 +26,8 @@ onMounted(()=>{
</template> </template>
<style scoped> <style scoped>
/deep/ .ant-tabs-nav-wrap{
padding-left: 20px !important;
}
</style> </style>

13
examples/src/common/PreviewWrapper.vue
View File

@ -12,7 +12,7 @@ const {type, inputSrc, src, fileList, beforeUpload} = usePreview(props.defaultSr
</script> </script>
<template> <template>
<div> <div class="preview-wrapper">
<div class="operate-area"> <div class="operate-area">
<a-radio-group v-model:value="type" button-style="solid"> <a-radio-group v-model:value="type" button-style="solid">
<a-radio-button value="url">远程文件地址</a-radio-button> <a-radio-button value="url">远程文件地址</a-radio-button>
@ -46,16 +46,23 @@ const {type, inputSrc, src, fileList, beforeUpload} = usePreview(props.defaultSr
</a-upload> </a-upload>
</div> </div>
<slot :src="src"></slot> <slot :src="src"></slot>
<div class="preview-wrapper-main">
</div>
</div> </div>
</template> </template>
<style scoped> <style scoped>
.preview-wrapper{
height: calc(100vh - 60px);
display: flex;
flex-direction: column;
}
.operate-area { .operate-area {
display: flex; display: flex;
margin: 10px; margin: 10px;
align-items: center; align-items: center;
flex-wrap: wrap;
} }
</style> </style>

2
examples/src/components/DocxDemo.vue
View File

@ -10,7 +10,7 @@ import PreviewWrapper from '../common/PreviewWrapper.vue'
default-src="https://501351981.github.io/vue-office/examples/dist/static/test-files/test.docx" default-src="https://501351981.github.io/vue-office/examples/dist/static/test-files/test.docx"
> >
<template v-slot="slotProps"> <template v-slot="slotProps">
<VueOfficeDocx :src="slotProps.src"/> <VueOfficeDocx :src="slotProps.src" style="flex: 1;height: 0"/>
</template> </template>
</PreviewWrapper> </PreviewWrapper>

2
examples/src/components/ExcelDemo.vue
View File

@ -12,7 +12,7 @@ import PreviewWrapper from '../common/PreviewWrapper.vue'
default-src="https://501351981.github.io/vue-office/examples/dist/static/test-files/test.xlsx" default-src="https://501351981.github.io/vue-office/examples/dist/static/test-files/test.xlsx"
> >
<template v-slot="slotProps"> <template v-slot="slotProps">
<VueOfficeExcel :src="slotProps.src"/> <VueOfficeExcel :src="slotProps.src" style="flex: 1;height: 0"/>
</template> </template>
</PreviewWrapper> </PreviewWrapper>

2
examples/src/components/PdfDemo.vue
View File

@ -10,7 +10,7 @@ import PreviewWrapper from '../common/PreviewWrapper.vue'
default-src="https://501351981.github.io/vue-office/examples/dist/static/test-files/test.pdf" default-src="https://501351981.github.io/vue-office/examples/dist/static/test-files/test.pdf"
> >
<template v-slot="slotProps"> <template v-slot="slotProps">
<VueOfficePdf :src="slotProps.src"/> <VueOfficePdf :src="slotProps.src" style="flex: 1;height: 0"/>
</template> </template>
</PreviewWrapper> </PreviewWrapper>
</template> </template>

2
lerna.json
View File

@ -1,5 +1,5 @@
{ {
"$schema": "node_modules/lerna/schemas/lerna-schema.json", "$schema": "node_modules/lerna/schemas/lerna-schema.json",
"useWorkspaces": true, "useWorkspaces": true,
"version": "0.1.3" "version": "0.1.4"
} }

2
package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "vue-office", "name": "vue-office",
"version": "0.1.3", "version": "0.1.4",
"description": "通过Vue开发的办公文档预览组件，支持docx、pdf、ppt、excel(已实现)的预览", "description": "通过Vue开发的办公文档预览组件，支持docx、pdf、ppt、excel(已实现)的预览",
"scripts": {}, "scripts": {},
"dependencies": { "dependencies": {

2
packages/docx/package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "@vue-office/docx", "name": "@vue-office/docx",
"version": "0.1.3", "version": "0.1.4",
"description": "", "description": "",
"main": "lib/index.js", "main": "lib/index.js",
"files": [ "files": [

8
packages/docx/src/main.vue
View File

@ -52,10 +52,16 @@ export default defineComponent({
</script> </script>
<template> <template>
<div class="vue-office-docx" ref="rootRef"></div> <div class="vue-office-docx">
<div class="vue-office-docx-main" ref="rootRef"></div>
</div>
</template> </template>
<style lang="less"> <style lang="less">
.vue-office-docx {
height: 100%;
overflow-y: auto;
}
@media screen and (max-width: 800px){ @media screen and (max-width: 800px){
.vue-office-docx { .vue-office-docx {
.docx-wrapper { .docx-wrapper {

2
packages/excel/package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "@vue-office/excel", "name": "@vue-office/excel",
"version": "0.1.3", "version": "0.1.4",
"description": "", "description": "",
"main": "lib/index.js", "main": "lib/index.js",
"files": [ "files": [

4
packages/excel/src/index.css
View File

@ -759,3 +759,7 @@ form fieldset select {
.x-spreadsheet-menu li:first-child { .x-spreadsheet-menu li:first-child {
display: none; display: none;
} }
.vue-office-excel {
height: 100%;
}

13
packages/excel/src/main.vue
View File

@ -17,6 +17,7 @@ export default defineComponent({
}, },
emits:['rendered', 'error'], emits:['rendered', 'error'],
setup(props, { emit }){ setup(props, { emit }){
const wrapperRef = ref(null)
const rootRef = ref(null) const rootRef = ref(null)
let xs = null let xs = null
function renderExcel(buffer){ function renderExcel(buffer){
@ -170,9 +171,14 @@ export default defineComponent({
} }
} }
onMounted(()=>{ onMounted(()=>{
let height = wrapperRef.value.clientHeight || 300
xs = new Spreadsheet(rootRef.value,{ xs = new Spreadsheet(rootRef.value,{
mode: 'read', mode: 'read',
showToolbar: false showToolbar: false,
view: {
height: () => height,
width: () => document.documentElement.clientWidth,
},
}).loadData({}); }).loadData({});
if(props.src){ if(props.src){
getData(props.src, props.requestOptions).then(renderExcel).catch(e =>{ getData(props.src, props.requestOptions).then(renderExcel).catch(e =>{
@ -193,6 +199,7 @@ export default defineComponent({
} }
}) })
return { return {
wrapperRef,
rootRef rootRef
} }
} }
@ -200,7 +207,9 @@ export default defineComponent({
</script> </script>
<template> <template>
<div class="vue-office-excel" ref="rootRef"></div> <div class="vue-office-excel" ref="wrapperRef">
<div class="vue-office-excel-main" ref="rootRef"></div>
</div>
</template> </template>
<style lang="less"> <style lang="less">

2
packages/pdf/package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "@vue-office/pdf", "name": "@vue-office/pdf",
"version": "0.1.3", "version": "0.1.4",
"description": "", "description": "",
"main": "lib/index.js", "main": "lib/index.js",
"files": [ "files": [

2
packages/pdf/src/main.vue
View File

@ -109,7 +109,7 @@ export default defineComponent({
</script> </script>
<template> <template>
<div class="vue-office-pdf" ref="vue-office-pdf" style="text-align: center;"> <div class="vue-office-pdf" ref="vue-office-pdf" style="text-align: center;overflow-y: auto;">
<div <div
v-if="numPages" v-if="numPages"
class="vue-office-pdf-wrapper" class="vue-office-pdf-wrapper"