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 处理。
• 移动端兼容性：部分移动浏览器可能限制程序化下载，需用户显式操作触发。

以上方法覆盖了纯前端实现文件下载的常见场景，根据实际需求选择合适方案。