📖纯JS实现导出表格功能

前言

点击按钮即可导出表格中的数据并生成一个表格文件

两个方法,功能一样,但是方法二导出表格会更快一点

代码

全部代码

<template>
	<div id="exel">
	<button @click='list_biao()'><i class="glyphicon glyphicon-arrow-down"></i>&nbsp;方式一</button>
	<button @click='a_biao()'><i class="glyphicon glyphicon-link"></i>&nbsp;方式二</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();
	}

标签