vue实现另存为对话框
使用 <a> 标签触发下载
通过动态创建 <a> 标签并设置 download 属性实现文件下载。需将文件内容转换为 Blob 或直接使用文件 URL：
// 示例：下载文本文件
const content = 'Hello, world!';
const blob = new Blob([content], { type: 'text/plain' });
const url = URL.createObjectURL(blob);
const link = document.createElement('a');
link.href = url;
link.download = 'example.txt';
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
URL.revokeObjectURL(url);通过后端接口返回文件流
若文件来自后端，需确保接口响应头包含 Content-Disposition: attachment。使用 axios 或 fetch 处理二进制响应：
axios.get('/api/download', { responseType: 'blob' }).then(res => {
const url = window.URL.createObjectURL(new Blob([res.data]));
const link = document.createElement('a');
link.href = url;
link.download = 'file.pdf';
link.click();
});使用第三方库简化操作
库如 file-saver 可简化 Blob 下载流程：
import { saveAs } from 'file-saver';
// 文本文件示例
saveAs(new Blob(['Hello!'], { type: 'text/plain' }), 'hello.txt');
// 从 URL 下载
saveAs('https://example.com/image.png', 'image.png');处理用户交互触发下载
通过按钮点击触发下载逻辑，结合 Vue 方法：
<template>
<button @click="handleDownload">保存文件</button>
</template>
<script>
export default {
methods: {
handleDownload() {
const content = 'Vue 生成的下载内容';
const blob = new Blob([content], { type: 'text/plain' });
const url = URL.createObjectURL(blob);
const link = document.createElement('a');
link.href = url;
link.download = 'vue-file.txt';
link.click();
URL.revokeObjectURL(url);
}
}
};
</script>注意事项
- 跨域限制：直接下载跨域资源需服务器配置 CORS 或通过后端代理。
- 文件名编码：中文文件名建议使用
encodeURIComponent处理。 - 移动端兼容性：部分移动浏览器可能限制程序化下载，需用户显式操作触发。
以上方法覆盖了纯前端实现文件下载的常见场景，根据实际需求选择合适方案。
