perf: 支持更多办公文件格式

This commit is contained in:
kuaifan 2024-12-13 09:47:52 +08:00
parent bcc74dd927
commit 0d6fd903f1
3 changed files with 35 additions and 41 deletions

View File

@ -79,9 +79,28 @@ class File extends AbstractModel
* office文件 * office文件
*/ */
const officeExt = [ const officeExt = [
'doc', 'docx', // 文本文件
'xls', 'xlsx', 'doc', 'docx', // Microsoft Word 文档
'ppt', 'pptx', 'dot', 'dotx', // Word 模板
'odt', // OpenDocument 文本格式
'ott', // OpenDocument 文本模板
'rtf', // 富文本格式
// 电子表格
'xls', 'xlsx', // Microsoft Excel 电子表格
'xlsm', // Excel 含宏的工作簿
'xlt', 'xltx', // Excel 模板
'ods', // OpenDocument 电子表格格式
'ots', // OpenDocument 电子表格模板
'csv', // 逗号分隔值
'tsv', // 制表符分隔值
// 演示文稿
'ppt', 'pptx', // Microsoft PowerPoint 演示文稿
'pps', 'ppsx', // PowerPoint 幻灯片放映
'pot', 'potx', // PowerPoint 模板
'odp', // OpenDocument 演示文稿格式
'otp', // OpenDocument 演示文稿模板
]; ];
/** /**
@ -264,9 +283,9 @@ class File extends AbstractModel
'text', 'md', 'markdown' => 'document', 'text', 'md', 'markdown' => 'document',
'drawio' => 'drawio', 'drawio' => 'drawio',
'mind' => 'mind', 'mind' => 'mind',
'doc', 'docx' => "word", 'doc', 'docx', 'dot', 'dotx', 'odt', 'ott', 'rtf' => "word",
'xls', 'xlsx' => "excel", 'xls', 'xlsx', 'xlsm', 'xlt', 'xltx', 'ods', 'ots', 'csv', 'tsv' => "excel",
'ppt', 'pptx' => "ppt", 'ppt', 'pptx', 'pps', 'ppsx', 'pot', 'potx', 'odp', 'otp' => "ppt",
'wps' => "wps", 'wps' => "wps",
'jpg', 'jpeg', 'webp', 'png', 'gif', 'bmp', 'ico', 'raw', 'svg' => "picture", 'jpg', 'jpeg', 'webp', 'png', 'gif', 'bmp', 'ico', 'raw', 'svg' => "picture",
'rar', 'zip', 'jar', '7-zip', 'tar', 'gzip', '7z', 'gz', 'apk', 'dmg' => "archive", 'rar', 'zip', 'jar', '7-zip', 'tar', 'gzip', '7z', 'gz', 'apk', 'dmg' => "archive",

View File

@ -2017,7 +2017,7 @@ class Base
$type = ['mp3', 'wma', 'wav', 'amr']; $type = ['mp3', 'wma', 'wav', 'amr'];
break; break;
case 'excel': case 'excel':
$type = ['xls', 'xlsx']; $type = ['xls', 'xlsx', 'xlsm', 'xlt', 'xltx', 'ods', 'ots', 'csv', 'tsv'];
break; break;
case 'app': case 'app':
$type = ['apk']; $type = ['apk'];

View File

@ -1,11 +1,8 @@
<template> <template>
<div class="component-only-office"> <div class="component-only-office">
<template v-if="$A.isDesktop()">
<Alert v-if="loadError" class="load-error" type="error" show-icon>{{$L('组件加载失败!')}}</Alert> <Alert v-if="loadError" class="load-error" type="error" show-icon>{{$L('组件加载失败!')}}</Alert>
<div :id="id" class="placeholder"></div> <div :id="id" class="placeholder"></div>
</template> <div v-if="loadIng > 0" class="office-loading"><Loading/></div>
<IFrame v-else class="preview-iframe" :src="previewUrl" @on-load="onFrameLoad"/>
<div v-if="loading" class="office-loading"><Loading/></div>
</div> </div>
</template> </template>
@ -60,15 +57,11 @@
} }
</style> </style>
<script> <script>
// 使 OnlyOffice
import {mapState} from "vuex"; import {mapState} from "vuex";
import IFrame from "../pages/manage/components/IFrame";
import {languageName} from "../language"; import {languageName} from "../language";
export default { export default {
name: "OnlyOffice", name: "OnlyOffice",
components: {IFrame},
props: { props: {
id: { id: {
type: String, type: String,
@ -99,7 +92,7 @@ export default {
data() { data() {
return { return {
loading: false, loadIng: 0,
loadError: false, loadError: false,
docEditor: null, docEditor: null,
@ -138,10 +131,6 @@ export default {
} }
} }
return fileUrl; return fileUrl;
},
previewUrl() {
return $A.apiUrl(this.fileUrl) + "&down=preview"
} }
}, },
@ -151,10 +140,7 @@ export default {
if (!id) { if (!id) {
return; return;
} }
if (!$A.isDesktop()) { this.loadIng++;
return;
}
this.loading = true;
this.loadError = false; this.loadError = false;
$A.loadScript($A.mainUrl("office/web-apps/apps/api/documents/api.js")).then(_ => { $A.loadScript($A.mainUrl("office/web-apps/apps/api/documents/api.js")).then(_ => {
if (!this.documentKey) { if (!this.documentKey) {
@ -172,27 +158,16 @@ export default {
}).catch(_ => { }).catch(_ => {
this.loadError = true this.loadError = true
}).finally(_ => { }).finally(_ => {
this.loading = false setTimeout(_ => {
this.loadIng--;
}, 300)
}) })
}, },
immediate: true, immediate: true,
},
previewUrl: {
handler() {
if (!$A.isDesktop()) {
this.loading = true;
}
},
immediate: true
} }
}, },
methods: { methods: {
onFrameLoad() {
this.loading = false;
},
getType(type) { getType(type) {
switch (type) { switch (type) {
case 'word': case 'word':
@ -219,7 +194,7 @@ export default {
} }
// //
let codeId = this.code || this.value.id; let codeId = this.code || this.value.id;
let fileName = $A.strExists(this.fileName, '.') ? this.fileName : (this.fileName + '.' + this.fileType); let fileName = $A.strExists(this.fileName, '.') ? this.fileName : (this.fileName + '.' + (this.value.ext || this.fileType));
let fileKey = `${this.fileType}-${keyAppend||codeId}`; let fileKey = `${this.fileType}-${keyAppend||codeId}`;
if (this.historyId > 0) { if (this.historyId > 0) {
fileKey += `-${this.historyId}` fileKey += `-${this.historyId}`