前端实现导出功能

//js文件写入
import FileSaver from 'file-saver';
import XLSX from 'xlsx';
export default{
	install(Vue){
		//导出excel表的方法(elementui表格外div的id,给文件取得名字)
        Vue.prototype.exportFunc = function (el, name) {
        
            // 从表生成工作簿对象
            // wb是要导出的表格的json数据
            let wb = XLSX.utils.table_to_book(document.getElementById(el));

            // 得到二进制字符串作为输出
            let wbout = XLSX.write(wb, {
                bookType: 'xlsx',
                type: 'binary'
            });

            // 得到blob
            let blob = new Blob([s2ab(wbout)], {type: 'application/octet-stream'})
			// 取名时使用
            let date = this.getDates(new Date());
            //第一个参数为导出的内容,第二个参数为文件名字
            FileSaver.saveAs(blob, date + name + '.xlsx');
           
        }

        const s2ab = function (s) {
            if (typeof ArrayBuffer !== 'undefined') {
                var cuf = new ArrayBuffer(s.length);
                var view = new Uint8Array(cuf);
                for (var i = 0; i !== s.length; i++) {
                    view[i] = s.charCodeAt(i) & 0xFF;
                }
                return cuf;
            } else {
                var cuf = new Array(s.length);
                for (var i = 0; i !== s.length; ++i) {
                    cuf[i] = s.charCodeAt(i) & oxFF;
                }
                return cuf;
            }
        }
        
	}
}


//命令行输入
//同时导入file-saver和xlsx的包
npm install file-saver xlsx --save-dev

//main.js中写入
import elxel from './assets/js/elxel'
Vue.use(elxel)

//调用elxel公共方法，exportFunc('要导出表格选择器id','导出表格的名称');
	<el-button type="success" @click="exportFunc('listTable','财务清清单')">导出</el-button>
	
	//导出表格的外包裹id选择器
	<div id="listTable">
		//elementui的表格
	</div>