首页 技术 正文
技术 2022年11月21日
0 收藏 341 点赞 2,457 浏览 3516 个字

在网上找的一个表格转excel插件,经过修改后使其适用于iview中的table组件

let idTmr;
const getExplorer = () => {
let explorer = window.navigator.userAgent;
//ie
if (explorer.indexOf("MSIE") >= 0) {
return 'ie';
}
//firefox
else if (explorer.indexOf("Firefox") >= 0) {
return 'Firefox';
}
//Chrome
else if (explorer.indexOf("Chrome") >= 0) {
return 'Chrome';
}
//Opera
else if (explorer.indexOf("Opera") >= 0) {
return 'Opera';
}
//Safari
else if (explorer.indexOf("Safari") >= 0) {
return 'Safari';
}
}const method = (ref,name) => { //整个表格拷贝到EXCEL中
if (getExplorer() == 'ie') {
let curTbl = ref;
let oXL = new ActiveXObject("Excel.Application"); //创建AX对象excel
let oWB = oXL.Workbooks.Add();
//获取workbook对象
let xlsheet = oWB.Worksheets(1);
//激活当前sheet
let sel = document.body.createTextRange();
sel.moveToElementText(curTbl);
//把表格中的内容移到TextRange中
sel.select;
//全选TextRange中内容
sel.execCommand("Copy");
//复制TextRange中内容
xlsheet.Paste();
//粘贴到活动的EXCEL中
oXL.Visible = true;
//设置excel可见属性 try {
let fname = oXL.Application.GetSaveAsFilename("Excel.xls", "Excel Spreadsheets (*.xls), *.xls");
} catch (e) {
print("Nested catch caught " + e);
} finally {
oWB.SaveAs(fname); oWB.Close(savechanges = false);
//xls.visible = false;
oXL.Quit();
oXL = null;
// 结束excel进程,退出完成
window.setInterval("Cleanup();", 1);
idTmr = window.setInterval("Cleanup();", 1); } } else {
tableToExcel(ref,name)
}
}const Cleanup = () => {
window.clearInterval(idTmr);
}const tableToExcel = (function() {
// 编码要用utf-8不然默认gbk会出现中文乱码
let uri = 'data:application/vnd.ms-excel;base64,',
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><meta charset="UTF-8"><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--></head><body><table>{table}</table></body></html>',
base64 = function(s) {
return window.btoa(unescape(encodeURIComponent(s)));
},
format = (s, c) => {
return s.replace(/{(\w+)}/g,
(m, p) => {
return c[p];
})
}
return (table, name) => {
let ctx = {
worksheet: name,
table
} //创建下载
let link = document.createElement('a');
link.setAttribute('href', uri + base64(format(template, ctx)));
link.setAttribute('download', name); // window.location.href = uri + base64(format(template, ctx))
link.click();
}
})()export default (theadData, tbodyEle, dataname = 'Worksheet') => {
// 写入key过滤不显示的td
let thArr = [];
// 建立节点
let table = document.createElement('table');
let thead = document.createElement('thead');
let tbody = tbodyEle.$el.getElementsByClassName('ivu-table-tbody')[0].cloneNode(true); // 建立thead中的tr
let thTr = document.createElement('tr');
// 遍历写入th表头
for(let i of theadData){
thArr.push(i.key);
let th = document.createElement('th');
let text = document.createTextNode(i.title);
th.appendChild(text);
thTr.appendChild(th);
} thead.appendChild(thTr);
table.appendChild(thead);
table.appendChild(tbody)
console.log(table)
method(table.innerHTML, dataname);
}

示例

<template>
<div>
<Table :columns="columns" :data="data" size="small" ref="table"></Table>
<br>
<Button type="primary" size="large" @click="exportData()">
<Icon type="ios-download-outline"></Icon> Export source data</Button>
</div>
</template>
<script>
import excel from './tableToExcel.js'
export default {
name: 'HelloWorld',
data() {
return {
columns: [{
title: '序号',
type: 'index',
width: 60,
align: 'center'
},
{
title: '姓名',
width: 100,
key: 'xingming'
},
{
title: '个人账号',
key: 'grzh'
},
{
title: '证件号码',
key: 'zjhm'
},
{
title: '未通过原因',
key: 'cwxx'
}
],
data: [{
xingming: '张三',
grzh: '11231',
zjhm: '123123123123123',
cwxx: '未通过原因',
}, {
xingming: '张三',
grzh: '11231',
zjhm: '123123123123123',
cwxx: '未通过原因',
}]
}
},
methods: {
exportData() {
excel(this.columns, this.$refs.table, '错误报告');
}
}
}</script>
相关推荐
python开发_常用的python模块及安装方法
adodb:我们领导推荐的数据库连接组件bsddb3:BerkeleyDB的连接组件Cheetah-1.0:我比较喜欢这个版本的cheeta…
日期:2022-11-24 点赞:878 阅读:9,075
Educational Codeforces Round 11 C. Hard Process 二分
C. Hard Process题目连接:http://www.codeforces.com/contest/660/problem/CDes…
日期:2022-11-24 点赞:807 阅读:5,551
下载Ubuntn 17.04 内核源代码
zengkefu@server1:/usr/src$ uname -aLinux server1 4.10.0-19-generic #21…
日期:2022-11-24 点赞:569 阅读:6,399
可用Active Desktop Calendar V7.86 注册码序列号
可用Active Desktop Calendar V7.86 注册码序列号Name: www.greendown.cn Code: &nb…
日期:2022-11-24 点赞:733 阅读:6,176
Android调用系统相机、自定义相机、处理大图片
Android调用系统相机和自定义相机实例本博文主要是介绍了android上使用相机进行拍照并显示的两种方式,并且由于涉及到要把拍到的照片显…
日期:2022-11-24 点赞:512 阅读:7,811
Struts的使用
一、Struts2的获取  Struts的官方网站为:http://struts.apache.org/  下载完Struts2的jar包,…
日期:2022-11-24 点赞:671 阅读:4,893