纯前端导出table和echart

  <script src="https://cdn.bootcdn.net/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
	<script src="https://cdn.bootcdn.net/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js"></script>
    <script src="https://huangbohang.github.io/export-word/dist/export-word.js"></script>复制

以上是需要导出的js文件

例子：

 <!DOCTYPE html>
<html lang="en">
<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>Document</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.1/echarts.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
	<script src="https://cdn.bootcdn.net/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js"></script>
    <script src="https://huangbohang.github.io/export-word/dist/export-word.js"></script>
    <style>
        .main{
            width:800px;
            margin: auto;
        }
        .bs-example-bg-classes p {
            padding: 15px;
        }
        #echart-block{
            width: 500px;
            height: 300px;
        }
        button{
            position: fixed;
            left: 0;
            top: 20px;
        }
    </style>
</head>
<body>
    <div class="main ">
 
            <h1>echart图表</h1>
            <div id="echart-block" class="need-to-img"></div>
            <
            <h1>table</h1>
			
			
            <div>
				<table class="table " >
					<tr>
					    <th rowspan="2">范围</th>
					    <th rowspan="2">月份</th>
					    <th rowspan="2">断面数</th>
						<th colspan="2">Ⅰ</th>
						<th colspan="2">Ⅱ</th>
						<th colspan="2">Ⅲ</th>
						<th colspan="2">Ⅳ</th>
						<th colspan="2">Ⅴ</th>
						<th colspan="2">劣Ⅴ</th>
						<th colspan="2">Ⅰ-Ⅱ</th>
						<th colspan="2">Ⅰ-Ⅲ</th>
					</tr>
					<tr>
					    <th>个数</th>
					    <th>比例(%)</th>
						<th>个数</th>
						<th>比例(%)</th>
						<th>个数</th>
						<th>比例(%)</th>
						<th>个数</th>
						<th>比例(%)</th>
						<th>个数</th>
						<th>比例(%)</th>
						<th>个数</th>
						<th>比例(%)</th>
						<th>个数</th>
						<th>比例(%)</th>
						<th>个数</th>
						<th>比例(%)</th>
					</tr>
				</table>
				
				
                <table class="table " >
                    <tr>
                        <th>日期</th>
                        <th>姓名</th>
                        <th>地址</th>
                    </tr>
                    <tr>
                        <td>2016-05-02</td>
                        <td>王小虎</td>
                        <td>上海市普陀区金沙江路 1518 弄'</td>
                    </tr>
                    <tr>
                        <td>2016-03-21</td>
                        <td>张小花</td>
                        <td>上海市普陀区金沙江路 1512 弄'</td>
                    </tr>
                    <tr>
                        <td>2016-01-4</td>
                        <td>李晓东</td>
                        <td>上海市普陀区金沙江路 1513 弄'</td>
                    </tr>
                    <tr>
                        <td>2016-04-02</td>
                        <td>王大哈</td>
                        <td>上海市普陀区金沙江路 1522 弄'</td>
                    </tr>
                    <tr>
                        <td>2016-05-12</td>
                        <td>李晓春</td>
                        <td>上海市普陀区金沙江路 1518 弄'</td>
                    </tr>
                </table> 
            </div>
           
    </div>
    <button type="button" class="btn btn-primary">download</button>
 
    <script>
        var myChart = echarts.init(document.getElementById('echart-block'));
        // 绘制图表
        myChart.setOption({
            title: {
                text: 'ECharts 入门示例'
            },
            tooltip: {},
            xAxis: {
                data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        });
    </script>
    <script>
        //需要导出的片段
        const wrap = document.querySelector('.main')
        document.getElementsByTagName('button')[0].onclick = function(){
        
           exportWord(wrap,{
              fileName:'测试文件',//导出的名字
              toImg:['.need-to-img']//需要转成图片的片段
          })
      }
        
 
 
    </script>
</body>
</html>复制

纯前端导出table和echart

jquery滚动固定侧边栏插件

jQuery

jQuery下载

纯前端导出table和echart

国内疫情数据可视化（Django echarts HTML）

【Echarts.js使用攻略1】曲线的添加与取消

Echarts Bmap做一个简单的地图的具体流程

Can‘t get DOM width or height. Please check dom.clientWidth and dom.clientHeight. They should not be

Vue实现消息提示功能

【vue-codemirror】Vue中强大的编辑器插件--vue-codemirror

前端哥

【Unity 编辑器插件】Runtime Editor 强大的编辑功能，可实现游戏运行时直接修改场景中的对象、组件、脚本和属性

Lua与Unity交互

Pygame介绍与游戏开发

【Unity精品源码】JU TPS 3 – 完整的第三人称射击游戏模板

自回归模型（Autoregressive, AR）解读

[包管理器窗口] 搜索包时出错。UnityEditor.EditorApplication:Internal_CallUpdateFunctions ()

Unity新版InputSystem短按与长按，改键的实现

Pygame经典小游戏--贪吃蛇（完整代码部分代码讲解）

Unity Mirror插件WebGL端多人联机实现

用 Python 写了一个天天酷跑(附源码)

1
【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011001

2
CSS 动画效果（5种） - 附完整示例

2025-02-28 12:02:481000

3
在Vue中实现与OpenAI对话的功能

2025-02-27 11:02:161000

4
jQuery.flowchart 项目常见问题解决方案

2025-02-24 13:02:021000

5
CSS常用属性（文本属性）

2024-11-04 09:11:111000

6
TypeScript 中的 Number 类型，Number 类型的特性、常见操作和注意事项

2024-09-30 23:09:061000

7
CSS写代码使页面划分为左右两个区域

2024-09-09 00:09:071000

8
vue使用datav echarts

2024-09-06 00:09:381000

9
使用TweenMax.js和CSS3创建冰球运动员动画效果教程

2024-09-04 23:09:411000

10
使用CDN提高jQuery加载速度

2024-08-24 23:08:211000

	<script src="https://cdn.bootcdn.net/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
	<script src="https://cdn.bootcdn.net/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js"></script>
	<script src="https://huangbohang.github.io/export-word/dist/export-word.js"></script>

	<!DOCTYPE html>
	<html lang="en">
	<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>Document</title>
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
	<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.1/echarts.min.js"></script>
	<script src="https://cdn.bootcdn.net/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
	<script src="https://cdn.bootcdn.net/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js"></script>
	<script src="https://huangbohang.github.io/export-word/dist/export-word.js"></script>
	<style>
	.main{
	width:800px;
	margin: auto;
	}
	.bs-example-bg-classes p {
	padding: 15px;
	}
	#echart-block{
	width: 500px;
	height: 300px;
	}
	button{
	position: fixed;
	left: 0;
	top: 20px;
	}
	</style>
	</head>
	<body>
	<div class="main ">

	<h1>echart图表</h1>
	<div id="echart-block" class="need-to-img"></div>
	<
	<h1>table</h1>


	<div>
	<table class="table " >
	<tr>
	<th rowspan="2">范围</th>
	<th rowspan="2">月份</th>
	<th rowspan="2">断面数</th>
	<th colspan="2">Ⅰ</th>
	<th colspan="2">Ⅱ</th>
	<th colspan="2">Ⅲ</th>
	<th colspan="2">Ⅳ</th>
	<th colspan="2">Ⅴ</th>
	<th colspan="2">劣Ⅴ</th>
	<th colspan="2">Ⅰ-Ⅱ</th>
	<th colspan="2">Ⅰ-Ⅲ</th>
	</tr>
	<tr>
	<th>个数</th>
	<th>比例(%)</th>
	<th>个数</th>
	<th>比例(%)</th>
	<th>个数</th>
	<th>比例(%)</th>
	<th>个数</th>
	<th>比例(%)</th>
	<th>个数</th>
	<th>比例(%)</th>
	<th>个数</th>
	<th>比例(%)</th>
	<th>个数</th>
	<th>比例(%)</th>
	<th>个数</th>
	<th>比例(%)</th>
	</tr>
	</table>


	<table class="table " >
	<tr>
	<th>日期</th>
	<th>姓名</th>
	<th>地址</th>
	</tr>
	<tr>
	<td>2016-05-02</td>
	<td>王小虎</td>
	<td>上海市普陀区金沙江路 1518 弄'</td>
	</tr>
	<tr>
	<td>2016-03-21</td>
	<td>张小花</td>
	<td>上海市普陀区金沙江路 1512 弄'</td>
	</tr>
	<tr>
	<td>2016-01-4</td>
	<td>李晓东</td>
	<td>上海市普陀区金沙江路 1513 弄'</td>
	</tr>
	<tr>
	<td>2016-04-02</td>
	<td>王大哈</td>
	<td>上海市普陀区金沙江路 1522 弄'</td>
	</tr>
	<tr>
	<td>2016-05-12</td>
	<td>李晓春</td>
	<td>上海市普陀区金沙江路 1518 弄'</td>
	</tr>
	</table>
	</div>

	</div>
	<button type="button" class="btn btn-primary">download</button>

	<script>
	var myChart = echarts.init(document.getElementById('echart-block'));
	// 绘制图表
	myChart.setOption({
	title: {
	text: 'ECharts 入门示例'
	},
	tooltip: {},
	xAxis: {
	data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
	},
	yAxis: {},
	series: [{
	name: '销量',
	type: 'bar',
	data: [5, 20, 36, 10, 10, 20]
	}]
	});
	</script>
	<script>
	//需要导出的片段
	const wrap = document.querySelector('.main')
	document.getElementsByTagName('button')[0].onclick = function(){

	exportWord(wrap,{
	fileName:'测试文件',//导出的名字
	toImg:['.need-to-img']//需要转成图片的片段
	})
	}



	</script>
	</body>
	</html>

纯前端导出table和echart

微信扫一扫：分享