当前位置：首页 > VUE

vue实现另存为对话框

2026-02-09 21:53:51VUE

Vue 实现另存为对话框的方法

使用 HTML5 的 `<a>` 标签下载

通过创建隐藏的 <a> 标签触发文件下载，适合简单场景。需设置 download 属性指定文件名。

<template>
  <button @click="downloadFile">另存为</button>
</template>

<script>
export default {
  methods: {
    downloadFile() {
      const content = "文件内容示例";
      const blob = new Blob([content], { type: 'text/plain' });
      const url = URL.createObjectURL(blob);
      const a = document.createElement('a');
      a.href = url;
      a.download = 'example.txt';
      a.click();
      URL.revokeObjectURL(url);
    }
  }
}
</script>

使用第三方库 FileSaver.js

FileSaver.js 简化了文件保存操作，支持更复杂的 Blob 类型和大文件处理。

<template>
  <button @click="saveFile">另存为</button>
</template>

<script>
import { saveAs } from 'file-saver';
export default {
  methods: {
    saveFile() {
      const blob = new Blob(["Hello, world!"], { type: 'text/plain;charset=utf-8' });
      saveAs(blob, 'hello.txt');
    }
  }
}
</script>

调用浏览器原生对话框（需用户交互）

通过 <input type="file"> 的 webkitdirectory 或兼容 API 实现目录选择，但功能受限。

<template>
  <input type="file" @change="handleFileSave" webkitdirectory directory multiple />
</template>

<script>
export default {
  methods: {
    handleFileSave(event) {
      const files = event.target.files;
      console.log('选择的文件列表:', files);
    }
  }
}
</script>

使用 Electron 的对话框 API（桌面应用）

在 Electron 环境中，可通过 dialog.showSaveDialog 实现完整系统级对话框。

const { dialog } = require('electron').remote;

methods: {
  async showSaveDialog() {
    const { filePath } = await dialog.showSaveDialog({
      title: '保存文件',
      defaultPath: 'untitled.txt',
      filters: [{ name: 'Text', extensions: ['txt'] }]
    });
    if (filePath) {
      // 写入文件逻辑
    }
  }
}