表格展示优化处理

src/CustomElement/EtaTable.ce.vue

@@ -17,6 +17,27 @@ const showData = ref(false);
 const sheetRef=ref(null)
 const sheetFooter=ref(null)
 
+const SheetFFType = {
+    0 : 'Times New Roman',
+    1 : 'Arial',
+    2 : 'Tahoma',
+    3 : 'Verdana',
+    4 : '微软雅黑',
+    5 : '宋体（Song）',
+    6 : '黑体（ST Heiti）',
+    7 : '楷体（ST Kaiti）',
+    8 : '仿宋（ST FangSong）',
+    9 : '新宋体（ST Song）',
+    10 : '华文新魏',
+    11 : '华文行楷',
+    12 : '华文隶书',
+ }
+
+const HtObj = {
+    0:"center",
+    1:'left',
+    2:'right'
+}
 const setDefaultSource=(sourceText)=>{
   return JSON.stringify({
     isShow: true,
@@ -49,6 +70,20 @@ async function getTableData(){
 
 getTableData()
 
+function handleCellStyle(cell){
+    return `
+        color: ${cell.fc};
+        font-weight: ${cell.bl ? 'bold' : 'normal'};
+        font-style: ${cell.it ? 'italic' : 'normal'};
+        text-align: ${HtObj[cell.HorizontalType]};
+        font-family: ${handleFF(cell.ff)};
+    `
+}
+
+function handleFF(ff){
+    return ff ? (typeof ff == 'number' ? SheetFFType[ff] :  ff) : ''
+}
+
 function getSizeStyle(index,type) {
     const { HeightList,WidthList } = info.value.ReferencedExcelConfig;
 
@@ -99,23 +134,17 @@ function getSizeStyle(index,type) {
                     :colspan="cell.mc.cs||1"
                     :rowspan="cell.mc.rs||1"
                     :style="`
-                        color: ${cell.fc};
-                        font-weight: ${cell.bl ? 'bold' : 'normal'};
-                        font-style: ${cell.it ? 'italic' : 'normal'};
                         background: ${cell.bg};
-                        font-size: ${cell.fs||info.Config?.FontSize||12}px;
+                        font-size: ${info.Config?.FontSize||cell.fs||12}px;
+                        ${!cell.ct.s ? handleCellStyle(cell) : ''}
                         ${getSizeStyle(cell_index,'width')}
                     `"
                     >
-                    <div class="split-word" v-if="cell.ct.s">
+                    <div class="split-word" v-if="cell.ct.s" :style="`text-align: ${HtObj[cell.HorizontalType]};`">
                         <span 
                         v-for="(word,word_index) in cell.ct.s" 
                         :key="`${index}_${cell_index}_${word_index}`"
-                        :style="`
-                            color: ${word.fc};
-                            font-weight: ${word.bl ? 'bold' : 'normal'};
-                            font-style: ${word.it ? 'italic' : 'normal'};
-                        `"
+                        :style="handleCellStyle(word)"
                         >{{word.v}}</span>
                     </div>
                     <div v-else>{{cell.m}}</div>

src/views/ppt/components/SheetWrap.vue

@@ -12,6 +12,28 @@ const props=defineProps({
     }
 })
 
+const SheetFFType = {
+    0 : 'Times New Roman',
+    1 : 'Arial',
+    2 : 'Tahoma',
+    3 : 'Verdana',
+    4 : '微软雅黑',
+    5 : '宋体（Song）',
+    6 : '黑体（ST Heiti）',
+    7 : '楷体（ST Kaiti）',
+    8 : '仿宋（ST FangSong）',
+    9 : '新宋体（ST Song）',
+    10 : '华文新魏',
+    11 : '华文行楷',
+    12 : '华文隶书',
+ }
+
+const HtObj = {
+    0:"center",
+    1:'left',
+    2:'right'
+}
+
 const sourceFrom=ref(null)
 
 // 获取表格数据
@@ -34,6 +56,20 @@ function setDefaultSource(sourceText){
     }
 }
 
+function handleCellStyle(cell){
+    return `
+        color: ${cell.fc};
+        font-weight: ${cell.bl ? 'bold' : 'normal'};
+        font-style: ${cell.it ? 'italic' : 'normal'};
+        text-align: ${HtObj[cell.HorizontalType]};
+        font-family: ${handleFF(cell.ff)};
+    `
+}
+
+function handleFF(ff){
+    return ff ? (typeof ff == 'number' ? SheetFFType[ff] :  ff) : ''
+}
+
 
 onMounted(()=>{
     getSheetInfo()
@@ -52,22 +88,17 @@ onMounted(()=>{
                             :rowspan="col.mc.rs===0?1:col.mc.rs"
                             :colspan="col.mc.cs===0?1:col.mc.cs"
                             :style="`
-                                color: ${col.fc};
-                                font-weight: ${col.bl ? 'bold' : 'normal'};
-                                font-style: ${col.it ? 'italic' : 'normal'};
                                 background: ${col.bg||'transparent'};
+                                font-size: ${pptSheetSize || col.fs || 12}px;
+                                ${!col.ct.s ? handleCellStyle(col) : ''}
                             `"
                         >
                             <!-- 单元格拆分 -->
-                            <div class="split-word" v-if="col.ct.s">
+                            <div class="split-word" v-if="col.ct.s" :style="`text-align: ${HtObj[col.HorizontalType]};`">
                                 <span 
                                     v-for="(word,word_index) in col.ct.s" 
                                     :key="`${rowIndex}_${colIndex}_${word_index}`"
-                                    :style="`
-                                    color: ${word.fc};
-                                    font-weight: ${word.bl ? 'bold' : 'normal'};
-                                    font-style: ${word.it ? 'italic' : 'normal'};
-                                    `"
+                                    :style="handleCellStyle(word)"
                                 >{{word.v}}</span>
                             </div>
                             <div v-else>{{col.m}}</div>