当前位置：首页 > VUE

vue实现本地文件写入

2026-01-20 00:12:33VUE

浏览器环境下的文件写入

在浏览器环境中，由于安全限制，前端JavaScript无法直接写入本地文件系统。但可以通过以下方式实现类似功能：

使用Blob对象和下载链接

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 = 'filename.txt'
document.body.appendChild(a)
a.click()
document.body.removeChild(a)
URL.revokeObjectURL(url)

使用FileSystem Access API（需要现代浏览器支持）

async function saveFile(content) {
  try {
    const handle = await window.showSaveFilePicker({
      suggestedName: 'file.txt',
      types: [{
        description: 'Text files',
        accept: {'text/plain': ['.txt']}
      }]
    })
    const writable = await handle.createWritable()
    await writable.write(content)
    await writable.close()
  } catch (err) {
    console.error('Error:', err)
  }
}

Node.js环境下的文件写入

如果在Vue项目中使用Node.js（如Electron或SSR场景），可以使用fs模块：

同步写入

const fs = require('fs')
fs.writeFileSync('path/to/file.txt', '文件内容')

异步写入

const fs = require('fs/promises')
async function writeFile() {
  try {
    await fs.writeFile('path/to/file.txt', '文件内容')
  } catch (err) {
    console.error(err)
  }
}

Electron应用中的文件写入

在Electron+Vue项目中，可以使用dialog模块与fs结合：

vue实现本地文件写入

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

async function saveFile(content) {
  const { filePath } = await dialog.showSaveDialog({
    title: '保存文件',
    defaultPath: 'untitled.txt'
  })

  if (filePath) {
    fs.writeFile(filePath, content, (err) => {
      if (err) console.error(err)
    })
  }
}