js下载文件操作

点击数据导出下载指定文件模板

例如:统计用户数据信息,点击按钮下载用户数据模板

第一种场景下载固定模板,使用a标签自带的下载功能;

	   <a @click.stop download  href="服务器文件地址.xlsx"><el-button type="text">下载模板</el-button></a>

第二种场景下载模板,数据为后端穿过来的文件流;

	   
	   axios({
           method: 'post',
           url: `//文件地址,一般使用拼接形式,防止项目上线后地址更改文件失效`,
           responseType: 'blob', //首先要指定格式类型,在请求中加入
            data: {
             ...this.searchForm,    //传递的文件类型参数
               planNo: this.row,    //文件编码
            },
          headers: {
            // 自行封装跟后端约定好的请求加密信息
          },
   	  }).then(res => {

请求成功数据后,对数据进行加工

  //获取文件流后
       const blob = new Blob([res.data]) //创建实例对象
       const fileName = "指定文件名称.xls" //约定指定文件名称
       const linkNode = document.createElement("a") //创建a标签利用a标签下载功能的特性
       linkNode.download = fileName //a标签的download属性规定下载文件的名称
       linkNode.style.display = "none"
       linkNode.href = URL.createObjectURL(blob) //生成一个Blob URL
       document.body.appendChild(linkNode)
       linkNode.click() //模拟在按钮上的一次鼠标单击
       URL.revokeObjectURL(linkNode.href) // 释放URL 对象
       document.body.removeChild(linkNode)
       this.loading = false
       this.$message.success('导出记录成功!')
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值