<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- import CSS -->
<link rel="stylesheet" href="index.css">
</head>
<style>
.el-checkbox {
display: block;
min-width: 100px;
padding: 5px 10px;
cursor: pointer;
margin-right: 0px;
}
.el-checkbox:hover {
background-color: #ecf5ff;
color: #66b1ff;
}
</style>
<body>
<div>
<div id="app">
<div style="width:800px;">
<button @click="downExcel">导出</button>
<template>
<el-table style="width: 100%" border :data="tableData">
<template v-for="(item,index) in total_tableHead">
<el-table-column :fixed="index==0" v-if="item.show" :prop="item.data" sortable
:label="item.title" :key="index"></el-table-column>
</template>
<el-table-column fixed="right" label="操作" width="100">
<template slot-scope="scope">
<el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
<el-button type="text" size="small">编辑</el-button>
</template>
</el-table-column>
</el-table>
</template>
</div>
<div class="data_norm">
<el-dropdown trigger="click" :hide-on-click="false">
<span class="el-dropdown-link">
数据指标
</span>
<el-dropdown-menu slot="dropdown">
<template>
<el-checkbox :indeterminate="isIndeterminate" v-model="checkAll"
@change="handleCheckAllChange">全选</el-checkbox>
<el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
<el-checkbox v-for="(item,index) in total_tableHead" @change="checked_item(item,index)"
:label="item.title" :key="item.title">{{item.title}}</el-checkbox>
</el-checkbox-group>
</template>
</el-dropdown-item>
</el-dropdown>
</div>
</div>
</body>
<script src="https://www.jq22.com/jquery/jquery-3.3.1.js"></script>
<!-- import Vue before Element :default-value="(new Date()).getTime()-3600*1000*24*30"-->
<script src="vue.js"></script>
<!-- import JavaScript -->
<script src="index.js"></script>
<script src="Export2Excel.js"></script>
<script type="text/javascript" src="xlsx.core.min.js"></script>
<script>
var Main = {
data() {
return {
total_tableHead: [
{ title: '日期', data: 'date', show: true },
{ title: '姓名', data: 'name', show: true },
{ title: '省份', data: 'province', show: true },
{ title: '市区', data: 'city', show: true },
{ title: '地址', data: 'address', show: true },
{ title: '邮编', data: 'zip', show: true },
],
tableData: [{
date: '2016-05-02',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333,
}, {
date: '2016-05-04',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1517 弄',
zip: 200333,
}, {
date: '2016-05-01',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1519 弄',
zip: 200333,
}, {
date: '2016-05-03',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1516 弄',
zip: 200333,
}],
checkAll: false,
checkedCities: [],
isIndeterminate: false
}
},
created() {
},
methods: {
handleClick() {
},
//下载excel
downExcel() {
this.exportExcel(this.tableData, this.total_tableHead, '导出.xlsx')
},
//导出excel
exportExcel(td, th, title) {
var ws = XLSX.utils.json_to_sheet(td);
var titles = {}
th.map(function (v, i) {
titles[v.data] = v.title
})
const range = XLSX.utils.decode_range(ws['!ref'])
for (let c = range.s.c; c <= range.e.c; c++) {
const header = XLSX.utils.encode_col(c) + '1'
ws[header].v = titles[ws[header].v]
}
openDownloadDialog(sheet2blob(ws), title);
},
handleCheckAllChange(val) {
let that = this;
let thead = [];
this.total_tableHead.map(function (item) {
thead.push(item.title)
})
this.checkedCities = val ? thead : [];
this.isIndeterminate = false;
},
handleCheckedCitiesChange(value) {
let checkedCount = value.length;
this.checkAll = checkedCount === this.total_tableHead.length;
this.isIndeterminate = checkedCount > 0 && checkedCount < this.total_tableHead.length;
},
checked_item(item, index) {
item.show = !item.show
},
},
computed: {
},
watch: {
}
}
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')
</script>
</html>Export2Excel.js
// csv转sheet对象
function csv2sheet(csv) {
var sheet = {}; // 将要生成的sheet
csv = csv.split('\n');
csv.forEach(function (row, i) {
row = row.split(',');
if (i == 0) sheet['!ref'] = 'A1:' + String.fromCharCode(65 + row.length - 1) + (csv.length - 1);
row.forEach(function (col, j) {
sheet[String.fromCharCode(65 + j) + (i + 1)] = { v: col };
});
});
return sheet;
}
// 将一个sheet转成最终的excel文件的blob对象，然后利用URL.createObjectURL下载
function sheet2blob(sheet, sheetName) {
sheetName = sheetName || 'sheet1';
var workbook = {
SheetNames: [sheetName],
Sheets: {}
};
workbook.Sheets[sheetName] = sheet;
// 生成excel的配置项
var wopts = {
bookType: 'xlsx', // 要生成的文件类型
bookSST: false, // 是否生成Shared String Table，官方解释是，如果开启生成速度会下降，但在低版本IOS设备上有更好的兼容性
type: 'binary'
};
var wbout = XLSX.write(workbook, wopts);
var blob = new Blob([s2ab(wbout)], { type: "application/octet-stream" });
// 字符串转ArrayBuffer
function s2ab(s) {
var buf = new ArrayBuffer(s.length);
var view = new Uint8Array(buf);
for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;
return buf;
}
return blob;
}
/**
* 通用的打开下载对话框方法，没有测试过具体兼容性
* @param url 下载地址，也可以是一个blob对象，必选
* @param saveName 保存文件名，可选
*/
function openDownloadDialog(url, saveName) {
if (typeof url == 'object' && url instanceof Blob) {
url = URL.createObjectURL(url); // 创建blob地址
}
var aLink = document.createElement('a');
aLink.href = url;
aLink.download = saveName || ''; // HTML5新增的属性，指定保存文件名，可以不要后缀，注意，file:///模式下不会生效
var event;
if (window.MouseEvent) event = new MouseEvent('click');
else {
event = document.createEvent('MouseEvents');
event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
}
aLink.dispatchEvent(event);
}
// 传入csv，执行后就会弹出下载框
function exportExcel(csv) {
var sheet = csv2sheet(csv);
var blob = sheet2blob(sheet);
openDownloadDialog(blob, '导出.xlsx');
}
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。