当前位置:首页 » 《随便一记》 » 正文

Vue实现下载及文件重命名

6 人参与  2023年04月04日 08:44  分类 : 《随便一记》  评论

点击全文阅读


效果如下:

 

 实现步骤:

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()


点击全文阅读


本文链接:http://zhangshiyu.com/post/58259.html

<< 上一篇 下一篇 >>

  • 评论(0)
  • 赞助本站

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

关于我们 | 我要投稿 | 免责申明

Copyright © 2020-2022 ZhangShiYu.com Rights Reserved.豫ICP备2022013469号-1