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文档的排版方式: 编辑器打 ...
随机推荐
- Xamarin.Forms 界面布局
<!--margin表示控件相对StackLayout的位置是设置组件之间的距离,或者距离父组件边缘的距离, 他的四个值是左边距,上边距,右边距,下边距 --> <!- ...
- Appium(九):Appium API(三) 滑动和拖拽、高级手势、手机操作
1. 滑动和拖拽 我们在做自动化测试的时候,有些按钮是需要滑动几次屏幕后才会出现,此时,我们需要使用代码来模拟手指的滑动,也就是接下来要学的滑动和拖拽了. 1.1 swipe滑动事件 从一个坐标位置滑 ...
- React-Native三种断点调试方式的流程和优缺点比较
RN的调试和web端的调试虽然相似,但是也有一些不同,下面就来比较一下三种断点调试方法的差异 总结: 感觉还是第一种好一些 1.React-Native-Debugger工具调试法 1.1 首先我们得 ...
- SpringCloud服务过滤filter
一.目录展示 二.application.yml配置文件 三.MyZuulFilter package com.zn.filter; import com.netflix.zuul.ZuulFilte ...
- python3数据分析,安装学习
python3数据分析,安装学习 转载注明来源: 本文链接 来自osnosn的博客,写于 2019-09-26. 为了简单.安装 anaconda3 就好啦. 因为安装原版python3,用pip安装 ...
- Comet OJ - Contest #11 B题 usiness
###题目链接### 题目大意:一开始手上有 0 个节点,有 n 天抉择,m 种方案,在每天中可以选择任意种方案.任意次地花费 x 个节点(手上的节点数不能为负),使得在 n 天结束后,获得 y 个节 ...
- Microsemi Libero系列教程(二)——新建点灯工程
前言 上一篇文章,介绍了Microsemi Libero系列教程(一)-Libero开发环境介绍,下载,安装与注册,作为嵌入式开发中的Hello World,点灯是再也基础不过的实验了,通过点灯实验, ...
- Docker入门(四)——MySQL镜像中的数据库可视化
在详细介绍这篇文章的内容前,需要说明下笔者写这篇文章的意图:笔者在现有的开发中,前后端联调的方式为Docker镜像对接,数据库使用MySQL镜像,开发环境为远程服务器,因此,笔者迫切需要一种能将远 ...
- C# .NET的BinaryFormatter、protobuf-net、Newtonsoft.Json以及自己写的序列化方法序列化效率和序列化后的文件体积大小对比
测试结果如下图: 测试结果整理后: 结论: 1.这几个工具中,protobuf-net序列化和反序列化效率是最快的 2.BinaryFormatter和Newtonsoft.Json反序列化慢的比较多 ...
- Java生鲜电商平台-高可用微服务系统如何设计?
Java生鲜电商平台-高可用微服务系统如何设计? 说明:Java生鲜电商平台高可用架构往往有以下的要求: 高可用.这类的系统往往需要保持一定的 SLA,7*24 时不间断运行不代表完全不挂,而是有一定 ...