vue实现下载apk
使用 Vue 实现下载 APK 文件
方法一：通过 <a> 标签直接下载
在 Vue 模板中添加一个下载按钮，并设置 href 为 APK 文件的 URL，同时添加 download 属性强制触发下载。
<template>
<a :href="apkUrl" download="app.apk">下载 APK</a>
</template>
<script>
export default {
data() {
return {
apkUrl: 'https://example.com/path/to/app.apk'
}
}
}
</script>方法二：通过 JavaScript 动态创建下载链接
如果需要在某些交互逻辑后触发下载（如点击按钮），可以通过动态创建 <a> 标签并模拟点击。
<template>
<button @click="downloadApk">下载 APK</button>
</template>
<script>
export default {
methods: {
downloadApk() {
const link = document.createElement('a')
link.href = 'https://example.com/path/to/app.apk'
link.download = 'app.apk'
document.body.appendChild(link)
link.click()
document.body.removeChild(link)
}
}
}
</script>方法三：使用 Axios 处理二进制流下载
如果后端返回的是二进制流（如通过 API 接口），可以使用 Axios 处理响应并生成下载链接。
<template>
<button @click="downloadApk">下载 APK</button>
</template>
<script>
import axios from 'axios'
export default {
methods: {
async downloadApk() {
try {
const response = await axios.get('https://example.com/api/download-apk', {
responseType: 'blob'
})
const url = window.URL.createObjectURL(new Blob([response.data]))
const link = document.createElement('a')
link.href = url
link.download = 'app.apk'
document.body.appendChild(link)
link.click()
window.URL.revokeObjectURL(url)
document.body.removeChild(link)
} catch (error) {
console.error('下载失败:', error)
}
}
}
}
</script>注意事项
- 确保 APK 文件的 URL 可公开访问或已配置正确的权限。
- 后端需设置响应头
Content-Disposition: attachment; filename="app.apk"以支持直接下载。 - 对于动态生成的下载链接，完成后需调用
URL.revokeObjectURL()释放内存。
