feat: readme 问题记录

README.md

@@ -3,12 +3,13 @@
  * @LastEditors: LiZhiWei
  * @Description:
  * @Date: 2019-05-14 12:01:55
- * @LastEditTime: 2025-04-16 10:46:08
+ * @LastEditTime: 2025-04-16 11:54:19
  -->
 # WisdomCityOffice
 
 ## 当前版本：v1.0.0
 
+
 ## Install
 
 ```
@@ -33,4 +34,8 @@ npm run build
 
 wisdomcity-office
 
+在线预览pptx、docx、pdf、xlsx、txt等文件
 
+## 问题记录
+1. 预览pdf时，组合图片识别宽度有问题
+2. 预览pdf时，段落序号识别有问题，无法识别棱形，✅形等形状。

src/components/view_file/components/index.vue

@@ -2,76 +2,57 @@
  * @Author: ChenYaJin
  * @Date: 2021-06-16 14:21:39
  * @LastEditors: LiZhiWei
- * @LastEditTime: 2025-04-16 10:21:48
+ * @LastEditTime: 2025-04-16 11:49:31
  * @Description: 文件柜-预览文件
 -->
 <template>
-  <div class="">
-    <w-header desc="预览文件详情。" class="header-rewrite">
-      <template>
-        <el-select
-          v-model="downloadUrl"
-          filterable
-          allow-create
-          default-first-option
-          clearable
-          placeholder="请选择或输入文件预览地址"
-          class="input-with-button"
-        >
-          <el-option
-            v-for="item in urlOptions"
-            :key="item.value"
-            :label="item.label"
-            :value="item.value"
-          >
-            <span class="url-label">{{ item.label }}</span>
-            <span class="url-value">{{ item.value }}</span>
-          </el-option>
-        </el-select>
-        <el-button
-          type="primary"
-          :loading="downloading"
-          @click="handleDownload"
-          style="margin-left: 10px;"
-        >
-          预览文件
-        </el-button>
-      </template>
-    </w-header>
-    <div class="modal-height">
-      <div class="file-box">
-        <p class="file-name">{{file.name}}</p>
-        <div class="view-wrapper">
-          <div class="preview-wrapper" ref="wrapper" v-if="isAbleView">
-            <div v-if="renderLoading && !showError" class="loading-process">
-              <el-progress class="file-progress" :text-inside="true" :stroke-width="15" :percentage="percentage"></el-progress>
-              <span class="load-text">
-                <template v-if="renderLoading && loadLoading">文件加载中....</template>
-                <template v-else>加载完成，文件显示中....</template>
-              </span>
-            </div>
-            <template  v-if="!showError">
-              <div class="preview-inner" ref="preview-inner">
-                <div class="preview-mark" ref="bg-mark" id="bg-mark"></div>
-                <div class="output" ref="output"></div>
-              </div>
+    <div class="">
+        <w-header desc="预览文件详情。" class="header-rewrite">
+            <template>
+                <el-select v-model="downloadUrl" filterable allow-create default-first-option clearable
+                    placeholder="请选择或输入文件预览地址" class="input-with-button">
+                    <el-option v-for="item in urlOptions" :key="item.value" :label="item.label" :value="item.value">
+                        <span class="url-label">{{ item.label }}</span>
+                        <span class="url-value">{{ item.value }}</span>
+                    </el-option>
+                </el-select>
+                <el-button type="primary" :loading="downloading" @click="handleDownload" style="margin-left: 10px;">
+                    预览文件
+                </el-button>
             </template>
-            <div class="error-wrapper" v-show="showError && !loadLoading">
-              <wc-page-tip tip="未找到相应文件信息" type="errorData" />
+        </w-header>
+        <div class="modal-height">
+            <div class="file-box">
+                <p class="file-name">{{file.name}}</p>
+                <div class="view-wrapper">
+                    <div class="preview-wrapper" ref="wrapper" v-if="isAbleView">
+                        <div v-if="renderLoading && !showError" class="loading-process">
+                            <el-progress class="file-progress" :text-inside="true" :stroke-width="15"
+                                :percentage="percentage"></el-progress>
+                            <span class="load-text">
+                                <template v-if="renderLoading && loadLoading">文件加载中....</template>
+                                <template v-else>加载完成，文件显示中....</template>
+                            </span>
+                        </div>
+                        <template v-if="!showError">
+                            <div class="preview-inner" ref="preview-inner">
+                                <!-- <div class="preview-mark" ref="bg-mark" id="bg-mark"></div> -->
+                                <div class="output" ref="output"></div>
+                            </div>
+                        </template>
+                        <div class="error-wrapper" v-show="showError && !loadLoading">
+                            <wc-page-tip tip="未找到相应文件信息" type="errorData" />
+                        </div>
+                    </div>
+                    <!-- <view-other-component v-else  :file="currentFile" /> -->
+                </div>
+            </div>
+            <div>
+                <file-detail-modal :id="fileId" :loadingFile="loadingFile" :file="currentFile"
+                    @updateSuccess="updateSuccess" @back="turnBack" />
             </div>
-          </div>
-          <!-- <view-other-component v-else  :file="currentFile" /> -->
         </div>
-      </div>
-      <div>
-        <file-detail-modal :id="fileId"
-          :loadingFile="loadingFile"
-          :file="currentFile"
-          @updateSuccess="updateSuccess"
-          @back="turnBack"/>
-      </div>
     </div>
-  </div>
 </template>
 <script>
 import { mapActions, mapState } from 'vuex'
@@ -130,7 +111,12 @@ export default {
         {
           value: 'https://501351981.github.io/vue-office/examples/dist/static/test-files/test.xlsx',
           label: 'Excel示例文件'
-        }
+        },
+        {
+       
+          value: 'https://fastly.picsum.photos/id/641/800/600.jpg?hmac=DJCZbdxrCoJPFV0jAsSIG1Ny0oc48zL3iqeMFqtKlD4',
+          label: '图片示例文件'
+        },
       ]
     }
   },
@@ -296,7 +282,8 @@ export default {
           // 从URL中获取文件名和类型
           const urlParts = this.downloadUrl.split('/')
           const fileName = urlParts[urlParts.length - 1]
-          const fileType = fileName.split('.').pop().toLowerCase()
+          const fileNameWithParams = urlParts[urlParts.length - 1]
+          const fileType = fileNameWithParams.split('?')[0].match(/\.([^.]+)$/)?.[1]?.toLowerCase() || ''
           //文件大小
           const fileSize = res.headers['content-length']/1024
           // 更新文件信息
@@ -307,24 +294,23 @@ export default {
             size: fileSize
           } 
           this.currentFile = {...this.file }
-          
           return readBuffer(res.data).then(arrayBuffer => {
             return this.renderResult(arrayBuffer, fileType)
           })
         })
         .then(() => {
-          const output = this.$refs['output']
-          const mark = this.$refs['bg-mark']
-          const isXlsx = ['xlsx'].includes(this.file.type)
+        //   const output = this.$refs['output']
+        //   const mark = this.$refs['bg-mark']
+        //   const isXlsx = ['xlsx'].includes(this.file.type)
           
         //   if (isXlsx) {
         //     this.$refs['preview-inner'].removeChild(mark)
         //     commJs.addWaterMarker(output, this.currentFile.markMessage)
         //   }
-          if (mark && output) {
-            mark.style.height = output.height + 'px'
-            commJs.addWaterMarker(mark, this.currentFile.markMessage)
-          }
+        //   if (mark && output) {
+        //     mark.style.height = output.height + 'px'
+        //     commJs.addWaterMarker(mark, this.currentFile.markMessage)
+        //   }
           
           this.$message.success('文件加载成功')
         })
@@ -343,60 +329,70 @@ export default {
 </script>
 <style lang="less">
 .docx-wrapper {
-  background: unset !important;
-  padding: 0 !important;
-  &>section.docx {
     background: unset !important;
-  }
+    padding: 0 !important;
+
+    &>section.docx {
+        background: unset !important;
+    }
 }
 </style>
 <style lang="less" scoped>
 @import './index.less';
-@deep:~'>>>';
+@deep: ~'>>>';
+
 @{deep} .header-rewrite {
-  margin-bottom: 0 !important;
+    margin-bottom: 0 !important;
 }
+
 .modal-height {
-  display: flex;
-  justify-content: space-between;
-  .file-box {
-    flex: 1;
-    padding: 15px 40px;
-    overflow: scroll;
-    text-align: center;
-    .file-name {
-      line-height: 36px;
-      text-align: center;
-      font-size: 16px;
-      font-weight: 500;
-    }
-    .view-wrapper {
-      position: relative;
-      width: 100%;
-      height: ~'calc(100% - 36px)';
-      overflow: hidden;
-    }
-    .output {
-      // border: 1px solid #ccc;
+    display: flex;
+    justify-content: space-between;
+
+    .file-box {
+        flex: 1;
+        padding: 15px 40px;
+        overflow: scroll;
+        text-align: center;
+
+        .file-name {
+            line-height: 36px;
+            text-align: center;
+            font-size: 16px;
+            font-weight: 500;
+        }
+
+        .view-wrapper {
+            position: relative;
+            width: 100%;
+            height: ~'calc(100% - 36px)';
+            overflow: hidden;
+        }
+
+        .output {
+            // border: 1px solid #ccc;
+        }
     }
-  }
 }
+
 .input-with-button {
-  width: 400px;
-  .url-label {
-    float: left;
-    color: #606266;
-  }
-  .url-value {
-    float: right;
-    color: #909399;
-    font-size: 13px;
-  }
+    width: 400px;
+
+    .url-label {
+        float: left;
+        color: #606266;
+    }
+
+    .url-value {
+        float: right;
+        color: #909399;
+        font-size: 13px;
+    }
 }
 
 @{deep} .el-select-dropdown__item {
-  padding: 0 20px;
-  height: 40px;
-  line-height: 40px;
+    padding: 0 20px;
+    height: 40px;
+    line-height: 40px;
 }
 </style>

src/components/view_file/components/vendors/image/ImageViewer.vue

@@ -2,17 +2,14 @@
  * @Author: LiZhiWei
  * @Date: 2025-04-09 08:10:23
  * @LastEditors: LiZhiWei
- * @LastEditTime: 2025-04-15 10:22:25
+ * @LastEditTime: 2025-04-16 11:44:40
  * @Description:
 -->
 <template>
-<div>
-   <!-- <img v-for="item in images" alt="图片" :src="item.src" :key="item.index" class="image" /> -->
-   <w-image
-    :src="images"
-    :previewList="images"
-  />
-</div>
+    <div>
+        <!-- <img v-for="item in images" alt="图片" :src="item.src" :key="item.index" class="image" /> -->
+        <w-image :src="images[0]" :previewList="images" width="100%" height="100%" :preview="true" />
+    </div>
 </template>
 
 <script>
@@ -23,7 +20,8 @@ export default {
   },
   computed: {
     images () {
-      return this.image ? [{ src: this.image }] : []
+        console.log('first', [this.image])
+      return this.image ? [this.image] : []
     }
   }
 }
@@ -31,9 +29,9 @@ export default {
 
 <style scoped>
 .image {
-  display: block;
-  width: auto;
-  height: 100%;
-  margin: 0 auto;
+    display: block;
+    width: auto;
+    height: 100%;
+    margin: 0 auto;
 }
 </style>