优化文件下载

liubp

2025-11-17 3124c573ed67f3039b9dcfe62434997e77cb4068

优化文件下载

 src/views/demo/page/desc/editkehu/index.vue

@@ -54,11 +54,18 @@
              上传合同文件
            </a-button>
          </a-upload>
          <div v-if="contractFiles.length">
            <div v-for="file in contractFiles" :key="file.uid">
              <a :href="file.url" :download="getFileName(file)" @click.prevent="downloadFile(file)" style="margin-top: 4px; display: inline-block">{{
          <div v-if="displayContractFiles.length">
            <div v-for="file in displayContractFiles" :key="file.uid">
              <a
                :href="resolveFileUrl(file)"
                :download="getFileName(file)"
                @click.prevent="downloadFile(file)"
                style="margin-top: 4px; display: inline-block"
              >
                {{
                getFileName(file)
              }}</a>
                }}
              </a>
            </div>
          </div>
        </a-descriptions-item>
@@ -76,11 +83,18 @@
              上传附件
            </a-button>
          </a-upload>
          <div v-if="attachmentFiles.length">
            <div v-for="file in attachmentFiles" :key="file.uid">
              <a :href="file.url" :download="getFileName(file)" @click.prevent="downloadFile(file)" style="margin-top: 4px; display: inline-block">{{
          <div v-if="displayAttachmentFiles.length">
            <div v-for="file in displayAttachmentFiles" :key="file.uid">
              <a
                :href="resolveFileUrl(file)"
                :download="getFileName(file)"
                @click.prevent="downloadFile(file)"
                style="margin-top: 4px; display: inline-block"
              >
                {{
                getFileName(file)
              }}</a>
                }}
              </a>
            </div>
          </div>
        </a-descriptions-item>
@@ -141,7 +155,7 @@
</template>

<script lang="ts">
  import { defineComponent, reactive, ref, onMounted } from 'vue';
  import { defineComponent, reactive, ref, onMounted, computed } from 'vue';
  import { PageWrapper } from '/@/components/Page';
  import { message } from 'ant-design-vue';
  import { UploadOutlined } from '@ant-design/icons-vue';
@@ -149,6 +163,7 @@
  import { useRoute, useRouter } from 'vue-router';
  import { saveOrUpdate, queryById } from '/@/views/contract/Contract.api';
  import { defHttp } from '/@/utils/http/axios';
  import { getFileAccessHttpUrl } from '/@/utils/common/compUtils';

  export default defineComponent({
    name: 'DescEditKehu',
@@ -307,6 +322,8 @@
      // 文件上传相关
      const contractFiles = ref<UploadProps['fileList']>([]);
      const attachmentFiles = ref<UploadProps['fileList']>([]);
      const displayContractFiles = computed(() => contractFiles.value || []);
      const displayAttachmentFiles = computed(() => attachmentFiles.value || []);

      // 文件上传前的处理
      const beforeUpload: UploadProps['beforeUpload'] = (file) => {
@@ -432,11 +449,17 @@
        }
        return name;
      };
      // 拼接可访问的文件URL
      const resolveFileUrl = (file: any) => {
        const url = file?.url || '';
        return url ? getFileAccessHttpUrl(url) : '';
      };
      // 文件下载
      const downloadFile = (file: any) => {
        if (file.url) {
        const fileUrl = resolveFileUrl(file);
        if (fileUrl) {
          const link = document.createElement('a');
          link.href = file.url;
          link.href = fileUrl;
          link.download = getFileName(file);
          link.target = '_blank';
          document.body.appendChild(link);
@@ -452,12 +475,15 @@
        formData,
        contractFiles,
        attachmentFiles,
        displayContractFiles,
        displayAttachmentFiles,
        semanticWords,
        beforeUpload,
        customUpload,
        handleReset,
        handleSave,
        getFileName,
        resolveFileUrl,
        downloadFile,
      };
    },