vue实现下载excel表格俩种方式

一般类似功能都会放到后端来做，当然作为一项扩展技能，前端开发人员也应该掌握。

今天，给大家介绍前端实现excel表格下载的俩种方式

方式一、

const jsonData = [{order:1,name:'小明',age:12},{order:2,name:'小张',age:20}]
if (!jsonData.length) return
// 表格的列标题 如果出现科学技术法或者其他格式 使用 \t
let title = '序号,名称,年龄\n'
jsonData.map(item => {let key = {}key['序号'] = item.orderkey['名称'] = item.namekey['年龄'] = item.agefor (let i in key){title += `${key[i] + '\t'},`}title += '\n'
})
// encodeURIComponent 解决中文乱码
let uri = 'data:text/csv;charset=utf-8,\ufeff' + encodeURIComponent(title)
// 创建a标签
let link = document.createElement('a')
link.href = uri
link.download = `${new Date().toLocaleString()}_数据表_${jsonData.length}条.csv`
link.click()

效果图：

虽然实现了我们的需求，但是表格看起来不够美观

方式二、
创建一个dom表格，可以添加样式

<table id="table" style="position: fixed;left: -10000px;"><tr><th>序号</th><th>名称</th><th style="width:200px">年龄</th></tr><tr v-for="(item,index) in jsonData"><td>{{item.order}}</td><td>{{item.name}}</td><td>{{item.age}}</td></tr>
</table>

获取到表格节点，生成dom节点树，生成blob对象

      exportExcel() {let oHtml = document.getElementById('table').outerHTMLlet excelHtml = `<html><head><meta charset='utf-8' /><style>table{min-width: calc(100vw - 290px);/*margin-top: 50px;*/border-collapse: collapse;border-spacing: 0;border: 1px #eee solid;border-radius: 50px;}table tr{height:50px;border: 1px #eee solid;white-space: nowrap;}table tr th{border: 1px #eee solid;background-color: #e1f0fe;}table tr td{border: 1px #eee solid;white-space: nowrap;padding: 30px 20px;text-align: center;}</style></head><body>${oHtml}</body></html> `;// 生成blob对象let excelBlob = new Blob([excelHtml], {type: 'application/vnd.ms-excel'})// 创建一个a标签let oA = document.createElement('a');// 利用URL.createObjectURL()方法为a元素生成blob URLoA.href = URL.createObjectURL(excelBlob);// 给文件命名oA.download = `${new Date().toLocaleString()}_提现数据表_${this.jsonData.length}条.xlsx`;// 模拟点击oA.click();},

效果图：

可以看到我们的表格宽度是200，以及我们添加的背景边框等额外样式，完美实现。

vue实现下载excel表格俩种方式相关推荐

详解Springboot下载Excel的三种方式
https://www.jb51.net/article/216656.htm 汇总一下浏览器下载和代码本地下载实现的3种方式. (其实一般都是在代码生成excel,然后上传到oss,然后传链接给前台 ...
vue前端下载文件的2种方式
以下两种方式下载适用于后端返回了文件的url下载地址 var x = new XMLHttpRequest();x.open("GET", url, true);//url为文件的 ...
vue前端下载文件的几种方式
前端经常需要通过后端给的文件流下载各种文件,比如excel,word,压缩包等方式一:使用 window.location.href 这里限于使用get方式 window.location.href ...
vue 在线编辑excel表格（原生和使用组件的两种方式）
vue 在线编辑excel表格(原生和使用组件的两种方式) top表头和left表头格式的表格 <template><div>& ...
利用EasyExcel完整的springboot +vue前后端导出并下载excel表格
文章目录写在前面正文 1. springboot后端引入easyexcel及使用 1.1 引入依赖 1.2 接口serviceImpl方法 1.3 提供一个对list集合去重的方法(根据相同key ...
html表格导出excel有几种方式
html表格导出excel有几种方式一. 前后端结合利用 JavaScript 将表格内容转换为 Excel 文件格式,然后通过 Ajax 请求将文件数据发送给后台,再由后台返回该文件数据流,前端 ...
vue中下载excel的使用，后端链接两种情况，一个是链接，一个是文件流
vue中下载excel使用一.这是第一种情况,后台链接地址返回的是一个url,这个时候我只要在导出按钮上绑定exportData()这个事件方法就好了 exportData() {this.time ...
vue下载excel表格模板和导入excel表格数据
vue下载excel表格模板和导入excel表格数据 vue制作excel表格模板给前端下载 vue制作excel表格模板给前端下载最近有个需求,需要导入excel表格,并且还需要制作模板给用户下载 ...
post方式下载excel表格
post方式下载excel表格 request({method: 'post',url: this.exportUrl,data: data,responseType: 'blob' // 服务器返回 ...
vue+element后台管理系统(下载excel表格)
标题 vue后台管理系统下载excel表格 1.调用后台接口传入三个参数,url,data参数,第三个参数为一个对象,表格下载返回类型. 2.创建 Blob实列传入后台返回的数据和以对象形式声明类型参 ...

vue实现下载excel表格俩种方式

vue实现下载excel表格俩种方式相关推荐

最新文章

热门文章