Vue实现下载及文件重命名

news2024/10/6 20:27:26

效果如下:

 

 实现步骤:

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://www.coloradmin.cn/o/25482.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

MindSpore和Python中nn.Unfold的区别

在往MindSpore迁移项目中遇到了这个转换&#xff0c;以至于不得不去仔细研究一下。 Unfold是卷积操作中的一部分&#xff0c;我们来看一下描述。 Unfold()函数是从一个batch图片中&#xff0c;提取出滑动的局部区域块&#xff0c;也就是卷积操作中的提取kernel filter对应的滑…

图片如何加水印?教你几招轻松加

相信很多喜欢出门游玩的小伙伴&#xff0c;会习惯将旅途中遇到的风景、趣事将其拍照记录下来&#xff0c;然后将图片分享到社交账号上去&#xff0c;但是互联网上什么人都有&#xff0c;总会有不怀好意的人&#xff0c;会在网上拿别人辛苦拍摄的照片&#xff0c;据为己有去发布…

开放式运动耳机哪款好,盘点几款目前最好的开放式耳机分享

如果是在户外运动的时候喜欢戴耳机&#xff0c;那么必然是要选择骨传导耳机&#xff0c;开放式耳道的设计在跑步的过程中&#xff0c;可以很快察觉到来往行人车辆&#xff0c;在安全方面能够极大缩小隐患的发声&#xff0c;无需入耳的佩戴设计能够以最大程度的释放我们的耳道长…

[翻译] 使用FXGL创建一个简单游戏 Pong (FXGL 11)

在本文中&#xff0c;我们将复刻经典的Pong游戏。要完成本教程&#xff0c;你首先需要获取FXGL要么通过Maven / Gradle&#xff0c;要么作为uber-jar。确保你使用FXGL 11 (例如11.3)。 本教程大部分是独立的&#xff0c;但是完成以前的基本教程将对一般理解非常有帮助。完整的…

刷题日记【第十三篇】-笔试必刷题【数根+星际密码+跳台阶扩展问题+快到碗里来】

刷题日记【第十三篇】-笔试必刷题【数根星际密码跳台阶扩展问题快到碗里来】 1.方法区在JVM中也是一个非常重要的区域&#xff0c;它与堆一样&#xff0c;是被【线程共享】的区域。 下面有关JVM内存&#xff0c;说法错误的是&#xff1f;(c) A.程序计数器是一个比较小的内存区…

GO语言之Goroutine和channel

1&#xff0c;goroutine-看一个需求 需求&#xff1a;要求统计1-90000000000的数字中&#xff0c;哪些是素数哦&#xff1f; 分析思路&#xff1a; 1&#xff09;传统的方法&#xff0c;就是使用一个循环&#xff0c;循环的判断各个数是不是素数。 2&#xff09;使用并发或…

Metabase学习教程:提问-5

多级聚合 如何使用查询生成器对多个部分提出问题。 许多分析问题只需四个步骤即可回答&#xff1a; 连接需要的表得到需要的信息。过滤数据使其仅包含期望的记录。分组和聚合这些数据&#xff0c;创造你所需要的价值。可视化结果&#xff0c;方便直观的理解数据告诉了你什么…

SpringBoot 集成JWT实现登录认证

如果文章对你有帮助欢迎【关注❤️❤️❤️点赞&#x1f44d;&#x1f44d;&#x1f44d;收藏⭐⭐⭐】一键三连&#xff01;一起努力&#xff01; 一、JWT简介 JSON Web Token&#xff08;JWT&#xff09;是一个非常轻巧的规范。这个规范允许我们使用JWT在用户和服务器之间传递…

基于粒子群优化算法的最佳方式设置无线传感器节点的位置,以减轻由于任何能量耗尽节点而产生的覆盖空洞(Matlab代码实现)

&#x1f468;‍&#x1f393;个人主页&#xff1a;研学社的博客 &#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜…

数据脱敏的安全管理

什么是数据脱敏 我们需要先说下什么是敏感数据&#xff0c; 敏感数据泛指个人信息&#xff08;姓名、电话、住址、健康信息、证件等数据&#xff09;、涉及需要保护的数据。 数据脱敏&#xff0c;是将敏感数据按照一定的规则对敏感数据进行变形&#xff0c;达到保护用户信息安…

提升80%上云集成效率, TA是如何做到的

摘要&#xff1a;基于华为云开天aPaaS&#xff0c;提升80%上云集成效率&#xff0c;降低50%集成成本没有充足资金&#xff0c;没有足够的项目规划和过渡时间&#xff0c;也没有经验丰富的IT团队支持&#xff0c;中小企业的上云路可谓是困难重重。如何帮助企业高效上云、实现降本…

【Globalmapper中文入门到精通系列实验图文教程】(附配套实验数据持续更新)

【Globalmapper中文版入门到精通系列实验图文教程】&#xff08;附配套实验数据持续更新&#xff09; 文章目录一、专栏简介二、文章目录三、数据目录四、传送门一、专栏简介 本专栏为GlobalMapper中文入门实战精品教程&#xff0c;内容主要涉及&#xff1a;Globalmapper23软件…

【Oracle】数据库账号频繁被锁问题解决

文中使用的Oracle版本为11g。 今天在测试环境中遇到了一个问题&#xff0c;如下图&#xff1a; 所有的数据库客户端访问Oracle11g都出现了上面的提示“ORA-28000: the account is locked”&#xff0c;一开始其实并不知道是什么原因引起的问题&#xff0c;到后面才发现是登录错…

Kotlin 开发Android app(九):Android两大布局LinearLayout和RelativeLayout

Kotlin 的基本特性就先写到这里&#xff0c;我们这个系列的定位是基础&#xff0c;也就是能用就好&#xff0c;够用就好&#xff0c;我们不会举太多的例子&#xff0c;但是这些都是最经常用到的特性。 从这节开始就是Kotlin和android 进行结合&#xff0c;使用Kotlin进行安卓应…

基于Spring Cloud的架构使用学习升级之路

引言 Spring Cloud全家桶用了挺长时间了&#xff0c;很长一段时间都是基于已有的架构进行需求研发。今年成为团队技术负责人&#xff0c;承担了新的项目&#xff0c;这是很好的一个机会&#xff0c;于是开启了项目架构升级之路。 架构&#xff0c;是团队项目的根基。在一个团…

数字信号处理-5-傅里叶分析

1 傅里叶系数 傅里叶级数用公式如下&#xff1a; a0、a1、a2、a3…b1、b2、b3…叫做傅里叶系数。cosnx 或 sinnx 中的 n 对应着频率&#xff0c;决定 sin、cos 大小的系数是 an、bn。 2 傅里叶变换 步骤1 求傅里叶系数 从原波形 F(x) 中求傅里叶系数中的 a0、a1、a2、a3……

IPD-产品需求管理过程(1)

一、产品需求管理模型 在确定客户需求时,要考虑影响用户购买标准的八类基本需求($APPEALS),并基于客户视角进行详细分解,形成有针对性的产品。 1.1、需求管理业务流程 二、需求收集流程 2.1、需求收集的来源 路标规划:通过市场管理流程分析,落实到路标规划中的需求…

python中StringIO和BytesIO

1. 类文件对象 最常见的io操作是将磁盘中的文件读到内存以及内存内容写入文I件。还有一种内存和内存之间的IO&#xff0c;叫类文件对象&#xff0c;python中的StringIO和BytesIO就是类文件对象&#xff0c;通俗解释即&#xff1a;像操作文件一样在内存中操作字符串和二进制内容…

基于FPGA的SD卡的数据读写实现(SD NAND FLASH)

文章目录 1、存储芯片分类 2、NOR Flash 与 NAND Flash的区别 3、什么是SD卡&#xff1f; 4、什么是SD NAND&#xff1f; 5、SD NAND的控制时序 6、FPGA实现SD NAND读写 6.1、设计思路 6.2、仿真结果 6.3、实验结果 1、存储芯片分类 目前市面上的存储芯片&#xff0…

如何使用腾讯云提供的WordPress应用镜像搭建博客网站系统!

之前也有写过搭建WordPress的教程&#xff0c;如何使用轻量应用服务器搭建WordPress个人博客使用的是宝塔面板一件搭建的方式&#xff0c;但是还是有一些麻烦&#xff0c;这里我们之间使用腾讯云提供的WordPress应用镜像搭建&#xff0c;感兴趣小伙伴可以参考以下&#xff01; …