📖纯JS实现导出表格功能
前言
点击按钮即可导出表格中的数据并生成一个表格文件
两个方法，功能一样，但是方法二导出表格会更快一点
代码
全部代码
<template>
<div id="exel">
<button @click='list_biao()'><i class="glyphicon glyphicon-arrow-down"></i> 方式一</button>
<button @click='a_biao()'><i class="glyphicon glyphicon-link"></i> 方式二</button>
<br><br>
<table class="table table-bordered">
<thead>
<tr>
<th>ID</th>
<th>产品名</th>
<th>价格</th>
<th>购买数量</th>
<th>防伪码</th>
</tr>
</thead>
<tbody v-for='list in goods'>
<tr>
<td>{{list.sequence}}</td>
<td>{{list.name}}</td>
<td>{{list.price}}</td>
<td>{{list.number}}</td>
<td>{{list.fangwei}}</td>
</tr>
</tbody>
</table>
</div>
</template>
<script>
export default{
name:"shopping",
data(){
return {
goods:[
{
sequence:1,
name:"纸巾",
price:10,
number:1,
fangwei:123
},
{
sequence:2,
name:"面包",
price:20,
number:1,
fangwei:456
},
{
sequence:3,
name:"手表",
price:30,
number:1,
fangwei:789
},
{
sequence:4,
name:"牛奶",
price:40,
number:1,
fangwei:101112
}
]
};
},methods:{
list_biao(){
const base64 = s => window.btoa(unescape(encodeURIComponent(s)));
let str = '<tr><td>ID</td><td>产品名</td><td>价格</td><td>购买数量</td><td>防伪码</td></tr>';
for(let i = 0 ; i < this.goods.length ; i++ ){
str+='<tr>';
for(const key in this.goods[i]){
// 增加\t为了不让表格显示科学计数法或者其他格式
str+=`<td>${ this.goods[i][key] + '\t'}</td>`;
}
str+='</tr>';
}
console.log(str);
let worksheet = 'a'
const uri = 'data:application/vnd.ms-excel;base64,';
const template = `<html xmlns:o="urn:schemas-microsoft-com:office:office"
xmlns:x="urn:schemas-microsoft-com:office:excel"
xmlns="http://www.w3.org/TR/REC-html40">
<head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet>
<x:Name>123</x:Name>
<x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet>
</x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]-->
</head><body><table>`+str+`</table></body></html>`;
//下载模板
window.location.href = uri + base64(template);
},
a_biao(){
let str = `ID,产品名,价格,购买数量,防伪码\n`;//表头
for(let i = 0 ; i < this.goods.length ; i++ ){
for(const key in this.goods[i]){
str+=`${this.goods[i][key] + '\t'},`;
}
str+='\n';
}
const uri = 'data:text/csv;charset=utf-8,\ufeff' + encodeURIComponent(str);
const link = document.createElement("a");
link.href = uri;
link.download = "方法2.csv";
link.click();
}
}
}
</script>
<style scoped>
.table th{text-align: center;}
</style>
方法一
将数据与表格样式进行对接，虽然输出的是以xls为后缀的表格，但文件形式上还是HTML
list_biao(){
const base64 = s => window.btoa(unescape(encodeURIComponent(s)));
let str = '<tr><td>ID</td><td>产品名</td><td>价格</td><td>购买数量</td><td>防伪码</td></tr>';
for(let i = 0 ; i < this.goods.length ; i++ ){
str+='<tr>';
for(const key in this.goods[i]){
// 增加\t为了不让表格显示科学计数法或者其他格式
str+=`<td>${ this.goods[i][key] + '\t'}</td>`;
}
str+='</tr>';
}
console.log(str);
let worksheet = 'a'
const uri = 'data:application/vnd.ms-excel;base64,';
const template = `<html xmlns:o="urn:schemas-microsoft-com:office:office"
xmlns:x="urn:schemas-microsoft-com:office:excel"
xmlns="http://www.w3.org/TR/REC-html40">
<head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet>
<x:Name>123</x:Name>
<x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet>
</x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]-->
</head><body><table>`+str+`</table></body></html>`;
//下载模板
window.location.href = uri + base64(template);
}
方法二
通过遍历将数据传输到cav下，这种方法会比较快一点输出文件，但是没测试过很大的数据量会怎么样
a_biao(){
let str = `ID,产品名,价格,购买数量,防伪码\n`;//表头
for(let i = 0 ; i < this.goods.length ; i++ ){
for(const key in this.goods[i]){
str+=`${this.goods[i][key] + '\t'},`;
}
str+='\n';
}
const uri = 'data:text/csv;charset=utf-8,\ufeff' + encodeURIComponent(str);
const link = document.createElement("a");
link.href = uri;
link.download = "方法2.csv";
link.click();
}
