vue + elementUI 实现表格的打印和下载

ゝ一世哀愁。 2022-10-28 03:54 385阅读 0赞

这篇文章主要介绍前端根据 table 表格里面已有的数据实现的下载功能，不需要调用接口，只是纯前端的一个功能实现；顺便介绍一下打印功能。

##### 1、打印 #####

获取表格数据，调用 window 的 print 方法；打印结束之后刷新页面重新给表格赋值。

<template>
    	<div>
    		<el-button @click="printTable">打印表格</el-button>
    		<el-table id="myTable" :data="tableData">
    		    <el-table-column prop="date" label="日期"></el-table-column>
    		    <el-table-column prop="name" label="姓名"></el-table-column>
    		    <el-table-column prop="address" label="地址"></el-table-column>
    		</el-table>
    	</div>
    </template>
    export default { 
    	data(){ 
    		return { 
    			tableData:[{ date:'xxxx',name:'aaaa',address:'ssss'}]
    		}
    	},
    	methods:{ 
    		//打印页面内容
    	    printTable(){ 
    	      let wpt = document.querySelector('#myTable');
    	      let newContent = wpt.innerHTML;
    	      let oldContent = document.body.innerHTML;
    	      document.body.innerHTML = newContent;
    	      window.print(); //打印方法
    	      // window.localtion.reload();
    	      history.go(0)
    	      document.body.innerHTML = oldContent;
    	    }
    	}
    }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5OTE4MA_size_16_color_FFFFFF_t_70]

##### 2、下载 #####

需要借助插件 xlsx 和 file-saver ；  
安装插件：

//各种电子表格格式的解析器和编写器
    npm install xlsx
    npm install file-saver --save

实现方法：

<template>
    	<div>
    		<el-button @click="downloadExcel">下载表格</el-button>
    		<el-table id="myTable" :data="tableData">
    		    <el-table-column prop="date" label="日期"></el-table-column>
    		    <el-table-column prop="name" label="姓名"></el-table-column>
    		    <el-table-column prop="address" label="地址"></el-table-column>
    		</el-table>
    	</div>
    </template>
    import FileSaver from 'file-saver';
    import XLSX from 'xlsx';
    export default { 
    	data(){ 
    		return { 
    			tableData:[{ date:'xxxx',name:'aaaa',address:'ssss'}]
    		}
    	},
    	methods:{ 
    		//导出Excel
    	    exportToExcel () { 
    	      //获取 table 表格数据
    	      let et = XLSX.utils.table_to_book(document.querySelector('#myTable')); //此处传入table的DOM节点
    	      let etout = XLSX.write(et, { 
    	        bookType: 'xlsx',
    	        bookSST: true,
    	        type: 'array'
    	      });
    	      try { 
    	          FileSaver.saveAs(new Blob([etout], { 
    	              type: 'application/octet-stream'
    	          }), 'trade-publish.xlsx');   //trade-publish.xlsx 为导出的文件名
    	      } catch (e) { 
    	          console.log(e, etout) ;
    	      }
    	      return etout;
    	    }
    	}
    }

这种方法实现的下载只能下载当前table表格展示的数据；如果有分页，  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5OTE4MA_size_16_color_FFFFFF_t_70 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5OTE4MA_size_16_color_FFFFFF_t_70]: /images/20221024/ac72496e116d4136bf0a33089a8c1ebf.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5OTE4MA_size_16_color_FFFFFF_t_70 1]: /images/20221024/858e9ee538bd4f77b4f6d2b5b04728a1.png