jquery.wordexport.js打印echarts.js画出的柱状图
jquery.wordexport.js打印echarts.js画出的柱状图。
echarts画出的图是不能直接打印出来的(echarts的柱状图是用canvas画出来的),而jquery.wordexport.js只能打印出图片,所以我先把echarts柱状图换成图片再去打印的。
用echarts.js的API中的getDataURL()方法:导出图表图片,返回一个 base64 的 URL,可以设置为Image的src。
<div id="tubi"></div> //柱状图位置
<img src="" id="tubiimg" style="display: none;" /> //后台传回来的图片路径(后台传回来的图片保存在本地项目中)
<div id="main"></div>
<img src="" id="tubiimg1" style="display: none;" />
<div id="pic1"></div>
<img src="" id="tubiimg2" style="display: none;" /
传回来图片路径之后,将之前的echarts柱状图替换成图片再去打印。
var picInfo = myChart.getDataURL();//获取柱状图的base64
echartImg(picInfo,"tubiimg","tubi"); //替换成图片 // 将echart的图保存成图片
function echartImg(baseimg,img,div){ $.ajax({
type:"post",
url:'{:url('imgss')}',
data:{base64Info:baseimg},
async:"false",
dataType:"json",
success:function(data){
console.log(data);
if(data.code==0){
$("#"+img).attr("src","/"+data.src);
$("#"+img).show();
$("#"+div).hide();
}
}
})
}
jquery.wordexport.js打印echarts.js画出的柱状图的更多相关文章
- 前端数据可视化echarts.js使用指南
一.开篇 首先这里要感谢一下我的公司,因为公司需求上面的新颖(奇葩)的需求,让我有幸可以学习到一些好玩有趣的前端技术,前端技术中好玩而且比较实用的我想应该要数前端的数据可视化这一方面,目前市面上的数据 ...
- echarts.js(图表插件)2.0版会导致 ZeroClipboard.js(复制插件)失效,3.0版未知。
解决方法:ZeroClipboard.js先于echarts.js加载.
- 百度推出的echarts,制表折线图柱状图饼图等的超级工具(转)
一.简介: 1.绘制数据图表,有了它,想要网页上绘制个折线图.柱状图,从此easy. 2.使用这个百度的echarts.js插件,是通过把图片绘制在canvas上在显示在页面上. 官网对echarts ...
- jquery插件导出word:jquery.wordexport.js
前言 今天项目中遇到一个需求把我们系统中的统计数据导出来(主要是表格).其实实现的的方法有很多,而此次针对我的系统第一获取数据有点慢,加上前不久写了一个在线阅读pdf,故此这次也想用前端的方式来导出. ...
- js jquery jquery.wordexport.js 实现导出word
由于工作需要,将一个页面导出word文档,主要是简历!经过百度搜索之后,没找到结果,无奈之下只能求助Google,意外发现jquery一款插件可以实现这个功能!而且效果还算可以! 基本可以实现想要的功 ...
- 使用jquery.PrintArea.js打印网页的样式问题
在使用jquery.PrintArea.js打印局部网页样式的时候,发现样式打印不出来,在网上找了好多资料,整理一下分享给大家 一.先看看css的引用文件方式 1.直接在内部的元素中使用”style” ...
- jQuery-jqprint.js打印插件使用高版本jQuery时问题
使用jqprint打印插件的网页demo代码: <!doctype html> <html> <head> <meta charset="utf-8 ...
- 页面打印(js/jquery)
1.js实现(可实现局部打印) <html> <title>js打印</title> <head></head><body> ...
- 使用 jquery.wordexport.js导出的Word排版
js导出word文档所需要的两个插件: FileSaver.js jquery.wordexport.js 使用jquery.wordexport.js这个插件导出的word文档的排版方式: 编辑器打 ...
随机推荐
- vue中点击屏幕其他区域关闭自定义div弹出框
直接上代码: mounted: function () { let that = this; $(document).on('click', function (e) { let dom = $('. ...
- .netcore实现一个读写分离的数据库访问中间件
在实际业务系统中,当单个数据库不能承载负载压力的时候,一般我们采用数据库读写分离的方式来分担数据库负载.主库承担写以及事务操作,从库承担读操作. 为了支持多种数据库我们先定义一个数据类型字典.key为 ...
- IO测试工具 - 用于IO测试 ; linux benchmarks
IO测试工具,用于磁盘IO测试,下面进行使用列表进行记录: iozone fio dd ioping iotop iostat bonnie++ crystalDisk Atto as-ssd-ben ...
- eclipse 的安装
打开eclipse官网 https://www.eclipse.org/ 点击此处 再点击 最后点击下载 然后一路下一步安装即可 添加中文语言包 打开eclipse官网 https://www.ecl ...
- SQL Server 2012 官方版 / SQL Server 2012下载
SQL Server是微软的一款专业免费的关系数据库管理工具, 是一个全面的数据库平台,使用集成的商业智能 (BI)工具提供了企业级的数据管理服务,SQL Server 数据库引擎为关系型数据和结构化 ...
- JavaBean动态添加删除属性
1.cglib BeanGenerator beanGenerator = new BeanGenerator(); beanGenerator.addProperty("id", ...
- Prometheus监控(二)
Prometheus监控(二) 数据类型 Counter(计数器类型) Counter类型的指标的工作方式和计数器一样,只增不减(除非系统发生了重置),Counter一般用于累计值. Gauges(仪 ...
- 网站如何免费升级到HTTPS?
最近在做网站SSL升级,看似简单的操作还是会遇到各种问题,现在和大家分享一下. 证书申请: 公司是创业公司,为了省成本准备申请免费证书,对比了一些证书商,最后选择使用沃通wosign提供的证书服务,发 ...
- 挖掘Dark Sky Maps(热的要死后,疯传的一个气温地图网站)
最近,各种朋友圈,社会媒体,都在疯传一张图,这张图显示的全球的气温图,本没有什么特别的,但是这张图的网站来源所展示的数据与气象局或者各种天气预报的温度值相差倒是不少,引来一片网友的吐槽. 但是,作为专 ...
- Python 函数和类
python作为一个面向对象的语言,也有类似java等面向对象语言相同的数据结构(class)的定义,和代码块数据结构定义"函数".为了极大可能的简化代码调用逻辑和书写规则,pyt ...