mirror of
https://github.com/501351981/vue-office.git
synced 2025-07-25 07:41:42 +08:00
change: 优化高度适应逻辑
This commit is contained in:
liyulin
parent
1bf84cd227
commit
af0851f6c4
@ -30,7 +30,11 @@ npm install @vue-office/pdf vue-demi
|
||||
**使用网络地址预览**
|
||||
```vue
|
||||
<template>
|
||||
<vue-office-docx :src="docx" @rendered="rendered"/>
|
||||
<vue-office-docx
|
||||
:src="docx"
|
||||
style="height: 100vh;"
|
||||
@rendered="rendered"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
4
examples/dist/index.html
vendored
4
examples/dist/index.html
vendored
@ -5,8 +5,8 @@
|
||||
<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" />
|
||||
<title>Vite + Vue</title>
|
||||
<script type="module" crossorigin src="/vue-office/examples/dist/assets/index-387877b2.js"></script>
|
||||
<link rel="stylesheet" href="/vue-office/examples/dist/assets/index-1db1ccb4.css">
|
||||
<script type="module" crossorigin src="/vue-office/examples/dist/assets/index-e6d4b51a.js"></script>
|
||||
<link rel="stylesheet" href="/vue-office/examples/dist/assets/index-171e346f.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
|
||||
@ -26,5 +26,8 @@ onMounted(()=>{
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
/deep/ .ant-tabs-nav-wrap{
|
||||
padding-left: 20px !important;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
@ -12,7 +12,7 @@ const {type, inputSrc, src, fileList, beforeUpload} = usePreview(props.defaultSr
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<div class="preview-wrapper">
|
||||
<div class="operate-area">
|
||||
<a-radio-group v-model:value="type" button-style="solid">
|
||||
<a-radio-button value="url">远程文件地址</a-radio-button>
|
||||
@ -46,16 +46,23 @@ const {type, inputSrc, src, fileList, beforeUpload} = usePreview(props.defaultSr
|
||||
</a-upload>
|
||||
|
||||
</div>
|
||||
|
||||
<slot :src="src"></slot>
|
||||
<div class="preview-wrapper-main">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.preview-wrapper{
|
||||
height: calc(100vh - 60px);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.operate-area {
|
||||
display: flex;
|
||||
margin: 10px;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
</style>
|
||||
@ -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"
|
||||
>
|
||||
<template v-slot="slotProps">
|
||||
<VueOfficeDocx :src="slotProps.src"/>
|
||||
<VueOfficeDocx :src="slotProps.src" style="flex: 1;height: 0"/>
|
||||
</template>
|
||||
|
||||
</PreviewWrapper>
|
||||
|
||||
@ -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"
|
||||
>
|
||||
<template v-slot="slotProps">
|
||||
<VueOfficeExcel :src="slotProps.src"/>
|
||||
<VueOfficeExcel :src="slotProps.src" style="flex: 1;height: 0"/>
|
||||
</template>
|
||||
|
||||
</PreviewWrapper>
|
||||
|
||||
@ -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"
|
||||
>
|
||||
<template v-slot="slotProps">
|
||||
<VueOfficePdf :src="slotProps.src"/>
|
||||
<VueOfficePdf :src="slotProps.src" style="flex: 1;height: 0"/>
|
||||
</template>
|
||||
</PreviewWrapper>
|
||||
</template>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
{
|
||||
"$schema": "node_modules/lerna/schemas/lerna-schema.json",
|
||||
"useWorkspaces": true,
|
||||
"version": "0.1.3"
|
||||
"version": "0.1.4"
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "vue-office",
|
||||
"version": "0.1.3",
|
||||
"version": "0.1.4",
|
||||
"description": "通过Vue开发的办公文档预览组件，支持docx、pdf、ppt、excel(已实现)的预览",
|
||||
"scripts": {},
|
||||
"dependencies": {
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@vue-office/docx",
|
||||
"version": "0.1.3",
|
||||
"version": "0.1.4",
|
||||
"description": "",
|
||||
"main": "lib/index.js",
|
||||
"files": [
|
||||
|
||||
@ -52,10 +52,16 @@ export default defineComponent({
|
||||
</script>
|
||||
|
||||
<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>
|
||||
|
||||
<style lang="less">
|
||||
.vue-office-docx {
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
}
|
||||
@media screen and (max-width: 800px){
|
||||
.vue-office-docx {
|
||||
.docx-wrapper {
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@vue-office/excel",
|
||||
"version": "0.1.3",
|
||||
"version": "0.1.4",
|
||||
"description": "",
|
||||
"main": "lib/index.js",
|
||||
"files": [
|
||||
|
||||
@ -758,4 +758,8 @@ form fieldset select {
|
||||
|
||||
.x-spreadsheet-menu li:first-child {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.vue-office-excel {
|
||||
height: 100%;
|
||||
}
|
||||
@ -17,6 +17,7 @@ export default defineComponent({
|
||||
},
|
||||
emits:['rendered', 'error'],
|
||||
setup(props, { emit }){
|
||||
const wrapperRef = ref(null)
|
||||
const rootRef = ref(null)
|
||||
let xs = null
|
||||
function renderExcel(buffer){
|
||||
@ -170,9 +171,14 @@ export default defineComponent({
|
||||
}
|
||||
}
|
||||
onMounted(()=>{
|
||||
let height = wrapperRef.value.clientHeight || 300
|
||||
xs = new Spreadsheet(rootRef.value,{
|
||||
mode: 'read',
|
||||
showToolbar: false
|
||||
showToolbar: false,
|
||||
view: {
|
||||
height: () => height,
|
||||
width: () => document.documentElement.clientWidth,
|
||||
},
|
||||
}).loadData({});
|
||||
if(props.src){
|
||||
getData(props.src, props.requestOptions).then(renderExcel).catch(e =>{
|
||||
@ -193,6 +199,7 @@ export default defineComponent({
|
||||
}
|
||||
})
|
||||
return {
|
||||
wrapperRef,
|
||||
rootRef
|
||||
}
|
||||
}
|
||||
@ -200,7 +207,9 @@ export default defineComponent({
|
||||
</script>
|
||||
|
||||
<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>
|
||||
<style lang="less">
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@vue-office/pdf",
|
||||
"version": "0.1.3",
|
||||
"version": "0.1.4",
|
||||
"description": "",
|
||||
"main": "lib/index.js",
|
||||
"files": [
|
||||
|
||||
@ -109,7 +109,7 @@ export default defineComponent({
|
||||
</script>
|
||||
|
||||
<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
|
||||
v-if="numPages"
|
||||
class="vue-office-pdf-wrapper"
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user