vue下载文件

在 Vue 项目中，要实现文件下载功能，通常有几种方式可以选择。

1. 直接使用 `a` 标签的 `download` 属性：

```html

点击下载

```

这种方式能够直接触发文件下载，但需要确保 `/path/to/file` 对应的文件可以在服务器上被访问到。

2. 使用 `axios` 发送 GET 请求，并将响应数据保存为文件：

```js

import axios from 'axios';

async function downloadFile() {

const response = await axios.get('/path/to/file'

{

responseType: 'blob' // 设置响应数据类型为二进制

});

const blob = new Blob([response.data]);

const link = document.createElement('a');

link.href = window.URL.createObjectURL(blob);

link.download = 'filename'; // 设置下载的文件名称

link.click();

window.URL.revokeObjectURL(link.href);

}

export default {

methods: {

async handleDownload() {

try {

await downloadFile();

} catch (error) {

console.error('下载文件失败'

error);

}

}

}

}

```

上述代码通过 `axios` 来发送 GET 请求并获取响应数据，将数据封装成 `Blob` 实例，并通过动态创建 `a` 标签的方式进行下载。

3. 使用第三方库 `file-saver` 来实现文件下载：

```bash

npm install file-saver --save

```

```js

import axios from 'axios';

import { saveAs } from 'file-saver';

async function downloadFile() {

const response = await axios.get('/path/to/file'

{

responseType: 'blob'

});

saveAs(response.data

'filename');

}

export default {

methods: {

async handleDownload() {

try {

await downloadFile();

} catch (error) {

console.error('下载文件失败'

error);

}

}

}

}

```

上述代码使用了 `file-saver` 库的 `saveAs` 方法，通过传入响应数据和文件名称来实现文件下载。

以上是几种实现文件下载功能的方式，根据自身项目需求和实际情况选择合适的方式即可。