纯前端导出table和echart

最新推荐文章于 2024-05-30 15:07:12 发布
最新推荐文章于 2024-05-30 15:07:12 发布
阅读量160 收藏
点赞数
文章标签： 前端 javascript ajax
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_40112036/article/details/129579265
版权 
 <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>

佳小宝
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
tableExport 前端数据导出工具
02-12
页面数据导出工具，通过tableExport 导出指定dable数据，可根据需求修改相关样式。
前端导出table为excal
04-29
前端导出table为excal前端导出table为excal前端导出table为excal前端导出table为excal前端导出table为excal前端导出table为excal
echarts企业地区大数据图表模板代码
七夕情人节表白网页代码100款 HTML5网页设计与制作1120款 Echarts大屏数据150款
08-26 996
echarts企业地区大数据图表模板代码 Html5 echarts.js制作通用的企业发展营销统计大数据管理图表页面模板代码。 作品介绍 1.网页作品简介方面 ： html5 echarts.js制作通用的企业发展营销统计大数据管理图表页面模板代码。 2.网页作品编辑方面：作品下载后可使用任意HTML编辑软件（例如：DW、HBuilder、NotePAD 、Vscode 、Sublime 、Webstorm 所有编辑器均可使用） 文章目录echarts企业地区大数据图表模板代码作品介绍一、作品演示二、代码
html页面引入echarts的两种方式
weixin_45304375的博客
03-19 1079
指定echarts容器，注意要给容器设置宽高，由于小编这里使用类创建的，不过多解释，正常创建直接去echarts官网查看。使用在线js文件，项目中一般不建议使用在线的地址，直接如方式一下载js文件更好.从echarts官网下载js文件，下载后放入到项目目录下。在需要echarts的html页面引入js文件。引入在线js文件即可。
html中页面上显示echart数据,Echarts怎么直接调用电脑上的数据给html
weixin_39612332的博客
06-03 272
网上搜了出来都是php上传，有哪位同学知道怎么不用php嘛？我只要在自己的电脑上能显示就行了。html>ECharts//基于准备好的dom，初始化echarts实例varmyChart=echarts.init(document.getElementById('main'));myChart.showLoading();$.get('SJ.json',function(data...
前端将页面的table转换成图片
zqyzqy22的博客
09-14 1310
前端将页面的table转换成图片 使用插件：dom-to-image npm安装：npm i dom-to-image 使用： //获取页面dom元素 var node = document.getElementById('my-node'); domtoimage.toPng(node) .then(function (dataUrl) { var img = new Image(); img.src = dataUrl; document.bod
JS组件系列——表格组件神器：bootstrap table（三：终结篇，最后的干货福利）
36ICE的博客
05-01 3997
一、效果展示 1、表格行样式  比如我们有一个显示订单页面的需求，不同状态的订单显示不同的颜色，如图： 2、表格行内编辑 第一篇的时候有园友就问过博主是否可以支持行内编辑的效果，答案是肯定的。我们先来看看效果： 编辑前 点击某个单元格数据 编辑后完成后 3、表格行列合并 关于行列合并的需求博主觉得是非常常
【已实现】纯前端导出带echarts的word文档，内附完整实现代码
@point
12-27 2065
主要利用docxtemplater实现.
Java导出easyui的table+echarts的图片为Excel
一见终秦的博客
06-02 978
由于项目使用的是easyui，现在需要做一个导出Excel功能，Excel内包含表格内容和图片信息。查看easyui的官网发现有扩展datagrid-export.js可以在前端导出excel，于是拿来使用，发现无法导出多级表头，改写源码后可以导出多级表头的excel，但是没法在前端导出echarts的base64编码的图片。因此使用Java后台采用poi来导出excel。考虑到前面已经在前端由table导出excel成功，想着可不可以直接传table到后台导出excel，网上搜索一翻，发现这位老哥做了，真
vue纯前端导出Excel
02-21
灵活使用getElementById 和 getElementsByClassName去获取页面元素 tableToExcel(tableId, fileName) { const base64 = s => window.btoa(unescape(encodeURIComponent(s))); var table=document....
前端导出Excel table2excel
11-20
前端导出excel，所见即所得，可以设置不导出列，可以设置不导出列，可以设置不导出列，简单方便，注释详细
前端页面导出table中的内容到excel
10-26
工作之余整理的，可用于实现在前端页面导出table表格中的数据到excel，支持生成json、excel等格式。
前端vue 表格转换为图片
weixin_60172238的博客
01-24 541
1、下载依赖 2、html代码 3、js代码 4、完整代码 最后 感谢阅读 如果有不足之处 请指出
记录一次前端页面崩溃的产生及处理
最新发布
weixin_51123079的博客
05-30 386
记录一次前端页面崩溃的产生及处理
Vue3实战笔记（52）—Vue 3封装持仓分析饼图
山花的博客
05-30 291
接上文，封装持仓分析饼图。封装好几个组件，用于后续开发。把忧愁煮成茶，让它在心间慢慢沉淀，剩下的，便是清甜的回味。
【JS实战案例汇总——不定时更新版】
微木
05-30 196
练习JS的实用案例
web前端三大主流框架
低调做人，低调编码，神码都是浮云
05-30 862
Web前端三大主流框架介绍：Angular、React、Vue
python前端通过API接口调用与后端进行数据交互前端如何调用api接口通过关键词获取电商平台热销商品数据
2301_78159247的博客
05-23 746
请求参数：q=女装&start_price=0&end_price=0&page=1&cat=0&discount_only=&sort=&page_size=&seller_info=&nick=&ppath=&imgid=&filter=参数说明：q:搜索关键字。
vue项目中纯前端导出excel文件
07-27
在Vue项目中，你可以使用`xlsx`库来实现纯前端导出Excel文件的功能。下面是一个简单的示例代码： 首先，你需要安装`xlsx`库。在项目的根目录下运行以下命令： ``` npm install xlsx ``` 然后，在需要导出Excel文件的组件中，可以按照以下方式编写代码： ```vue <template> <div> <button @click="exportExcel">导出Excel</button> </div> </template> <script> import XLSX from 'xlsx'; export default { methods: { exportExcel() { const data = [ ['姓名', '年龄', '性别'], ['张三', 20, '男'], ['李四', 25, '女'], ['王五', 30, '男'] ]; const ws = XLSX.utils.aoa_to_sheet(data); const wb = XLSX.utils.book_new(); XLSX.utils.book_append_sheet(wb, ws, 'Sheet1'); XLSX.writeFile(wb, 'data.xlsx'); } } } </script> ``` 在上述代码中，我们首先引入了`xlsx`库。然后，在`exportExcel`方法中，我们定义了要导出的数据`data`，以及工作表对象`ws`和工作簿对象`wb`。接下来，我们使用`XLSX.writeFile`方法将工作簿对象保存为Excel文件，并指定文件名为`data.xlsx`。 当用户点击"导出Excel"按钮时，就会触发`exportExcel`方法，从而导出Excel文件。 请注意，这种方式只能在现代浏览器中使用，并且导出的Excel文件将保存在用户的本地文件系统中。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值