FileDownload 文件下载

支持多种下载方式，显示下载进度的文件下载组件。

基础用法

使用 link 方法进行简单的文件下载。

<template>
  <ExFileDownload
    url="https://example.com/file.pdf"
    filename="document.pdf"
    method="link"
    button-text="下载文件"
  />
</template>

显示下载进度

使用 xhr 或 fetch 方法可以显示下载进度。

<template>
  <ExFileDownload
    url="https://example.com/large-file.zip"
    filename="game-assets.zip"
    method="xhr"
    :show-progress="true"
  />
</template>

不同下载方式

支持三种下载方式：link、fetch、xhr。

Link 方式（简单快速，无进度）

Fetch 方式（支持进度，现代浏览器）

XHR 方式（支持进度，兼容性好）

<template>
  <!-- Link 方式 -->
  <ExFileDownload
    url="https://example.com/file.pdf"
    filename="document.pdf"
    method="link"
  />
  
  <!-- Fetch 方式 -->
  <ExFileDownload
    url="https://example.com/file.zip"
    filename="archive.zip"
    method="fetch"
    :show-progress="true"
  />
  
  <!-- XHR 方式 -->
  <ExFileDownload
    url="https://example.com/file.zip"
    filename="archive.zip"
    method="xhr"
    :show-progress="true"
  />
</template>

自动下载

设置 auto-download 为 true 可以在组件挂载时自动开始下载。

<template>
  <ExFileDownload
    url="https://example.com/file.pdf"
    filename="document.pdf"
    method="link"
    :auto-download="true"
  />
</template>

自定义按钮

可以自定义下载按钮的样式和内容。

<template>
  <ExFileDownload
    url="https://example.com/file.pdf"
    filename="document.pdf"
    method="link"
    button-text="立即下载"
    button-type="primary"
    button-size="large"
  />
</template>

游戏资源下载示例

展示游戏资源包的下载列表。

角色资源包

包含所有角色模型和贴图 (125 MB)

音频资源包

背景音乐和音效文件 (85 MB)

地图资源包

所有游戏地图和场景 (256 MB)

<template>
  <ExSpace direction="vertical">
    <ExCard v-for="pack in resourcePacks" :key="pack.id" hoverable>
      <div class="resource-pack">
        <div class="resource-pack__info">
          <h4>{{ pack.name }}</h4>
          <p>{{ pack.description }} ({{ pack.size }})</p>
        </div>
        <ExFileDownload
          :url="pack.url"
          :filename="pack.filename"
          method="link"
          button-size="small"
        />
      </div>
    </ExCard>
  </ExSpace>
</template>

<script setup>
import { ref } from 'vue'

const resourcePacks = ref([
  {
    id: 1,
    name: '角色资源包',
    description: '包含所有角色模型和贴图',
    size: '125 MB',
    url: '/downloads/characters.zip',
    filename: 'characters.zip',
  },
  // ...
])
</script>

API

Props

属性	说明	类型	默认值
url	下载URL	string	-
filename	文件名	string	-
method	下载方式	'link' | 'fetch' | 'xhr'	'link'
show-progress	是否显示进度	boolean	true
auto-download	是否自动下载	boolean	false
button-text	按钮文本	string	'下载'
button-type	按钮类型	ButtonType	'primary'
button-size	按钮尺寸	ButtonSize	'medium'
headers	请求头	Record<string, string>	-
with-credentials	是否携带cookie	boolean	false

Events

事件名	说明	类型
start	开始下载时触发	() => void
progress	下载进度更新时触发	(percent: number) => void
success	下载成功时触发	(blob: Blob) => void
error	下载失败时触发	(error: Error) => void

Methods

方法名	说明	类型
download	手动触发下载	() => void
abort	取消下载	() => void

无障碍支持

• 完整的键盘导航支持
• ARIA 属性标注
• 屏幕阅读器友好

主题定制

:root {
  --ex-download-button-bg: var(--ex-color-primary);
  --ex-download-progress-color: var(--ex-color-neon-blue-500);
}