效果如下:
实现步骤:
html:
<el-table-column prop="name" label="操作" align="center" header-align="center" width="165"> <template slot-scope="scope"> <el-button type="text" size="small" @click="downloadExport(scope.row)">下载</el-button> </template></el-table-column>
JS:
downloadExport(row){ var nowTime = new Date().UTF2() let url = process.env.BASE_Url+encodeURI(row.fileUri) const config = { methods:'get', url:url, responseType:'blob' } axios(config).then((res)=>{ const link = document.createElement('a') const url = window.URL.createObjectURL(new Blob([res.data],{ type: 'application/vnd.ms-excel' })) link.setAttribute("href",url); link.setAttribute('download',row.origin + '_'+nowTime+'xlsx') link.click() })}
代码解析:
因为需求是:不仅要实现下载,而且所下载的文件名需要自定义(文件名+时间)
我这里做了时间的格式化
var nowTime = new Date().UTF2()
当前下载文件的路径
let url = process.env.BASE_Url+encodeURI(row.fileUri)
调用参数
const config
生成一个a标签
const link = document.createElement('a')
创建一个对象
window.URL.createObjectURL(new Blob([res.data],{ type: 'application/vnd.ms-excel' }))
bold参数是一个file对象或者bold对象
objectURL是生成的对象URL,通过这个URL,可以获取到所指定文件的完整内容
如果不指定文件类型的话,默认为txt类型,反正我是遇到了,所以我制定了文件类型
{ type: 'application/vnd.ms-excel' }
增加一个指定名称和值的新属性,或者把一个现有属性设定为指定的值
这里是给创建的 a 标签增加属性href和值url
格式:
name:要设置的属性名
value:要设置的属性值
link.setAttribute("href",url);
再给创建的a标签指定 download 属性,并且拼接文件名及时间
link.setAttribute('download',row.origin + '_'+nowTime+'xlsx')
最后让创建的新属性触发点击事件
link.click()