当前位置：首页 > VUE

vue实现另存为对话框

2026-01-12 08:47:58VUE

使用 `<a>` 标签下载文件

通过动态创建 <a> 标签并设置 download 属性实现文件下载。适用于已知文件 URL 或 Blob 数据。

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

<script>
export default {
  methods: {
    downloadFile() {
      const link = document.createElement('a')
      link.href = 'https://example.com/file.pdf' // 文件URL或Blob URL
      link.download = 'custom-filename.pdf' // 设置下载文件名
      document.body.appendChild(link)
      link.click()
      document.body.removeChild(link)
    }
  }
}
</script>

使用 FileSaver.js 库

FileSaver.js 提供了更简单的 API 来处理文件保存，支持 Blob/File/URL 多种数据源。

vue实现另存为对话框

安装依赖：

npm install file-saver

组件实现：

vue实现另存为对话框

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

<script>
import { saveAs } from 'file-saver'
export default {
  methods: {
    saveFile() {
      const blob = new Blob(['文件内容'], { type: 'text/plain;charset=utf-8' })
      saveAs(blob, 'example.txt')
    }
  }
}
</script>

浏览器原生对话框方案

通过 <input type="file"> 的 webkitdirectory 属性可以实现目录选择（仅限 Chrome）。

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

<script>
export default {
  methods: {
    handleFileSave(e) {
      const files = e.target.files
      // 处理用户选择的保存位置
    }
  }
}
</script>

使用 Electron 的 dialog 模块

在 Electron 应用中可以使用系统原生对话框：

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

export default {
  methods: {
    async showSaveDialog() {
      const result = await dialog.showSaveDialog({
        title: '保存文件',
        defaultPath: '/path/to/default',
        filters: [
          { name: 'Text', extensions: ['txt'] },
          { name: 'All Files', extensions: ['*'] }
        ]
      })
      if (!result.canceled) {
        // 使用fs模块写入文件
      }
    }
  }
}