当前位置：首页 > VUE

vue实现本地文件写入

2026-02-20 16:13:13VUE

Vue 实现本地文件写入的方法

由于浏览器环境的安全限制，Vue 应用无法直接写入本地文件系统。但可以通过以下几种方式间接实现：

使用 File System Access API

现代浏览器支持 File System Access API，允许网页应用请求用户授权后访问本地文件系统：

async function saveFile(content) {
  const options = {
    types: [
      {
        description: 'Text Files',
        accept: {
          'text/plain': ['.txt'],
        },
      },
    ],
  };
  const handle = await window.showSaveFilePicker(options);
  const writable = await handle.createWritable();
  await writable.write(content);
  await writable.close();
}

使用 Blob 对象和下载链接

通过创建 Blob 对象并触发下载的方式"写入"文件：

function downloadFile(filename, content) {
  const blob = new Blob([content], { type: 'text/plain' });
  const link = document.createElement('a');
  link.href = URL.createObjectURL(blob);
  link.download = filename;
  link.click();
  URL.revokeObjectURL(link.href);
}

使用 Electron 框架

对于桌面应用开发，可以使用 Electron 框架结合 Node.js 的 fs 模块：

const fs = require('fs');

function writeFile(path, content) {
  fs.writeFile(path, content, (err) => {
    if (err) throw err;
    console.log('文件已保存');
  });
}

使用第三方库

一些库如 FileSaver.js 简化了文件保存过程：

import { saveAs } from 'file-saver';

function saveFile(content, filename) {
  const blob = new Blob([content], {type: "text/plain;charset=utf-8"});
  saveAs(blob, filename);
}

注意事项

浏览器环境下需要用户主动触发文件操作（如点击事件）
File System Access API 需要 HTTPS 环境或 localhost
考虑兼容性问题，部分 API 可能不被所有浏览器支持
对于敏感操作需要明确的用户授权

实现示例

结合 Vue 的响应式特性和文件操作：

<template>
  <div>
    <textarea v-model="fileContent"></textarea>
    <button @click="saveFile">保存文件</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fileContent: ''
    }
  },
  methods: {
    async saveFile() {
      if (!window.showSaveFilePicker) {
        alert('您的浏览器不支持此功能');
        return;
      }
      try {
        const handle = await window.showSaveFilePicker();
        const writable = await handle.createWritable();
        await writable.write(this.fileContent);
        await writable.close();
      } catch (err) {
        console.error(err);
      }
    }
  }
}
</script>

vue实现本地文件写入