js生成execl表格

js方法

let str = '<table><tr><td>姓名</td><td>职别</td></tr><tr><td>张三</td><td>技术员</td></tr></table>'// 方法一
function exportExecl1(){const uri = 'data:application/vnd.ms-excel;base64,';window.location.href = uri + window.btoa(unescape(encodeURIComponent(str)));
}// 方法二
function exportExecl2(){const uri = 'data:text/csv;charset=utf-8,\ufeff' + encodeURIComponent(str);const link = document.createElement("a");link.href = uri;// 下载的文件命名 也可以（5月数据表.xlsx）link.download =  "5月数据表.csv";link.click();
}

完整代码（使用了vue渲染）

需要使用服务启动才能加载到 data.json 数据

可参考 HTML热加载 - 使用live-server

<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>test</title><script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script><script src="https://unpkg.com/axios/dist/axios.min.js"></script><style>#app{padding: 50px 0;display: flex;flex-direction: column;}table {/* border-collapse: collapse; */}th {padding: 0 20px;}button{align-self: center;margin-top: 50px;background-color: #43aebd;border: none;padding: 10px 50px;border-radius: 5px;box-shadow: 1px 1px 5px #bbb;cursor: pointer;color: #fff;font-weight: bold;}</style></head><body><div id="app"><div style="align-self: center;" ref="tableRef"><table border="1" cellspacing="0" cellpadding="0" width="1000"><thead><th :colspan="colNum" height="50">5月实际产出分析表</th></thead><tbody><tr align="center"><td>工位描述</td><td>时段</td><td>时间段</td><td v-for="item in theda">{{item}}</td><td>总计</td><td>最大值</td><td>最小值</td><td>平均值</td><td>结论</td></tr><tr v-for="(item, index) in tbody" align="center"><td rowspan="12" v-if="index == 0">{{item.gongWei}}</td><td rowspan="4" v-if="index == 0 || index == 4 || index == 8">{{item.shid}}</td><td>{{item.shiJianD}}</td><td v-for="item1 in item.dataNum">{{item1}}</td><td v-for="item2 in item.count">{{item2}}</td></tr></tbody><tfoot><tr v-for="item in tfoot" align="center"><td colspan="3" :bgcolor="item.title == '理论需求' ? '#ff4f4f' : '#d1ffcf'">{{item.title}}</td><td v-for="(item1,index) in item.num" :bgcolor="item.title == '理论需求' ? (index < (item.num.length - 4) ? '#ff4f4f' : '') : (index < (item.num.length - 4) ? '#d1ffcf' : (item.title == '平均产出' ? (index > (item.num.length - 4) ? '#59b2ff' : '') : ''))">{{item1}}</td></tr></tfoot></table></div><button @click="exportExcel">导出</button></div></body><script>new Vue({el: '#app',data: {theda: {},colNum: 8,tbody: {},tfoot: {},},mounted() {axios.get('data.json').then((res) => {// console.log(res.data.data)this.theda = res.data.thedathis.colNum += this.theda.lengththis.tbody = res.data.tbodythis.tfoot = res.data.tfoot})},methods: {exportExcel() {let str = this.$refs.tableRef.innerHTML// console.log(str)const uri = 'data:application/vnd.ms-excel;base64,' + window.btoa(unescape(encodeURIComponent(str)))// 下载const link = document.createElement('a')link.href = urilink.download = '5月报表.xlsx'link.click()},},})</script>
</html>

data.json数据

{"theda":["5/2","5/3","5/4","5/5","5/6","5/7","5/8","5/9","5/10","5/11","5/12","5/13","5/14","5/15"],"tbody":[{"gongWei":"工位05","shid":"上午","shiJianD":8,"dataNum":[0,29,30,40,34,28,37,19,48,20,6,49,55,49],"count":[133,40,29,33.25]},{"gongWei":"工位05","shid":"上午","shiJianD":9,"dataNum":[0,29,30,40,34,28,37,19,48,20,6,49,55,49],"count":[133,40,29,33.25]},{"gongWei":"工位05","shid":"上午","shiJianD":10,"dataNum":[0,29,30,40,34,28,37,19,48,20,6,49,55,49],"count":[133,40,29,33.25]},{"gongWei":"工位05","shid":"上午","shiJianD":11,"dataNum":[0,29,30,40,34,28,37,19,48,20,6,49,55,49],"count":[133,40,29,33.25]},{"gongWei":"工位05","shid":"中午","shiJianD":14,"dataNum":[0,29,30,40,34,28,37,19,48,20,6,49,55,49],"count":[133,40,29,33.25]},{"gongWei":"工位05","shid":"中午","shiJianD":15,"dataNum":[0,29,30,40,34,28,37,19,48,20,6,49,55,49],"count":[133,40,29,33.25]},{"gongWei":"工位05","shid":"中午","shiJianD":16,"dataNum":[0,29,30,40,34,28,37,19,48,20,6,49,55,49],"count":[133,40,29,33.25]},{"gongWei":"工位05","shid":"中午","shiJianD":17,"dataNum":[0,29,30,40,34,28,37,19,48,20,6,49,55,49],"count":[133,40,29,33.25]},{"gongWei":"工位05","shid":"晚上","shiJianD":19,"dataNum":[0,29,30,40,34,28,37,19,48,20,6,49,55,49],"count":[133,40,29,33.25]},{"gongWei":"工位05","shid":"晚上","shiJianD":20,"dataNum":[0,29,30,40,34,28,37,19,48,20,6,49,55,49],"count":[133,40,29,33.25]},{"gongWei":"工位05","shid":"晚上","shiJianD":21,"dataNum":[0,29,30,40,34,28,37,19,48,20,6,49,55,49],"count":[133,40,29,33.25]},{"gongWei":"工位05","shid":"晚上","shiJianD":22,"dataNum":[0,29,30,40,34,28,37,19,48,20,6,49,55,49],"count":[133,40,29,33.25]}],"tfoot":[{"title":"当日上班时间","num":[12,12,12,12,8,12,12,12,12,11,8,11,8,8,"/","/","/","/"]},{"title":"总产出","num":[409,333,424,436,222,373,442,609,509,357,349,519,346,308,"/","/","/","/"]},{"title":"平均产出","num":[34,28,37,19,48,20,6,49,55,49,28,35,36,28,"/",50.75,27.75,37.7]},{"title":"理论需求","num":[64,64,64,64,64,64,64,64,64,64,64,64,64,64,"/","/","/","/"]}]}

效果图

end~~~

js生成execl表格相关推荐

JS生成动态表格并为每个单元格添加单击事件的方法
<html><head><title>Demo</title><script>function getColumnDetail(column ...
html利用js生成excel表格（html表格标签生成excel）table2excel实例：一表格多sheets
table2excel实例使用插件:table2excel.js 简介:table2excel 可以转换和下载html上的表格,使他成为.xlsx格式,能够被Excel打开实例代码 <hea ...
简单无脑使用 jquery.table2excel.js 生成excel表格
下载 jquery.table2excel.js 下载地址 jquery.table2excel.js 下载后在文件夹中找到js文件用哪个都可以代码: <script src="/P ...
JS - 生成动态表格
<script>var datas = [{name: '卡卡西',subject: 'JavaScript',grade: 100,}, {name: '鸣人',subject: 'Ja ...
js生成excel表格并下载
<button id="" type="button" class="u-btn normal importBtn" > < ...
使用javascript生成Excel表格（内含实例demo），可下载xlsx.core.min.js、excel.js包
分享一个我的小demo:GuitHub ExcelDownload 实例下载(布局简陋,随便看看就行),喜欢就给个star,哈哈一.生成excel表格的原理打蛇打七寸,擒贼先擒王.通过标题就可以知 ...
zabbix-api查询机器资源利用率，导出execl表格
zabbix调用api查询机器资源利用率,导出execl表格背景:平常我们工作中,需要知道机器的资源利用率多少,我们可以手动查看,但是有1000多台改怎么办? 方案:我们机器如果是zabbix监控的 ...
html生成自定义表格,自定义js的表格插件
场景:指定元素,生成自定义表格. 目的:了解js的插件开发. html代码: 自定义表格插件 var test = new MyTable({ elid:"mytable",//定 ...
通过JS代码动态生成HTML表格(Table),Input框,Button按钮.并且通过Input框的值进行查询动态生成数据填写在指定的表格里
本人公众号上线啦!!! 公众号与博客名一样:没有腹肌的程序猿公众号文章类型:工作上所遇到的需求实现方案分享. 此外也会提供一些数据集供大家使用.(这个还在规划中,毕竟打工人时间挺紧的,哈哈哈哈) 到 ...
java使用jxl生成excel表格,jsp使用js下载excel文件xls
java使用jxl生成excel表格,jsp使用js下载excel文件后端代码 maven jar包主体代码逻辑引入的jar包具体代码段重点详解表头和表格内容两种格式直接将 HttpSe ...

js生成execl表格

js方法

完整代码（使用了vue渲染）

data.json数据

效果图

end~~~

js生成execl表格相关推荐

最新文章

热门文章