vue下载文件保存到本地教程

<code class="bash">npm install axios --save</code>

<code class="javascript"><template>
  <button @click="downloadFile">下载文件</button>
</template>

<script>
import axios from 'axios';

export default {
  methods: {
    async downloadFile() {
      // 填写文件的 URL
      const fileUrl = 'https://example.com/file.txt';
      
      // 发送文件下载请求
      const response = await axios({
        method: 'get',
        url: fileUrl,
        responseType: 'blob'
      });
      
      // 下载文件并保存到本地
      const fileName = '下载的文件.txt'; // 设置要保存的文件名
      const blob = new Blob([response.data]);
      const link = document.createElement('a');
      link.href = window.URL.createObjectURL(blob);
      link.download = fileName;
      link.click();
    }
  }
}
</script></code>

<code class="javascript">import { createApp } from 'vue';
import App from './App.vue';

const app = createApp(App);
app.mount('#app');</code>