写一个这样的代码,vue上传成功文件之后,通过前端发送请求,到后台,如何通过获取每一行表格的id来下载文件,加上blob
时间: 2023-09-21 11:08:14 浏览: 68
假设你的表格数据是从后台获取的,每一行数据都有一个唯一的id字段,我们可以通过给每一行添加下载按钮的方式来实现下载功能。具体实现步骤如下:
1. 首先,在表格中添加一个“下载”按钮列,代码如下:
```html
<el-table-column label="操作">
<template slot-scope="scope">
<el-button type="primary" icon="el-icon-download" @click="handleDownload(scope.row.id)">下载</el-button>
</template>
</el-table-column>
```
其中,`scope.row.id`表示当前行的id值,我们将在点击“下载”按钮时将其传递给`handleDownload`方法。
2. 在`handleDownload`方法中,发送一个GET请求到后台,携带当前行的id值作为参数,获取文件数据并进行下载。代码如下:
```js
handleDownload(id) {
this.$http.get(`/api/download?id=${id}`, { responseType: 'blob' }).then(res => {
const content = res.data;
const blob = new Blob([content]);
const fileName = res.headers['content-disposition'].split(';')[1].split('=')[1];
const link = document.createElement('a');
link.href = URL.createObjectURL(blob);
link.download = decodeURIComponent(fileName);
link.click();
});
}
```
其中,`this.$http`是使用`axios`库进行HTTP请求的示例,你可以根据自己的项目实际情况进行修改。`responseType: 'blob'`表示获取响应数据的类型为二进制流。获取到响应数据后,我们将其包装成一个`Blob`对象,然后创建一个`<a>`标签,将`Blob`对象的URL赋值给`href`属性,将文件名赋值给`download`属性,然后模拟点击该标签,触发浏览器下载文件的行为。
注意:后台需要根据传递的id值,查询文件相关信息并返回给前端。另外,由于涉及到文件下载,需要考虑文件名编码和浏览器兼容性的问题。
阅读全文