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文档的排版方式: 编辑器打 ...
随机推荐
- OpenWrite一款博客可一文多发的实用工具
前言 许多网友想看一文多发的OpenWrite,今天,它来了!别问落地价,因为内测无价! 这款实用工具,可支持十大博客平台一键发布,是博主们的发文神器 你看它多种平台.一键管理.后台界面优雅.还有签到 ...
- C# List集合 GroupBy分组
var grpBalance = listBalance.GroupBy(m => new { m.MerChantId, m.Name}).Distinct().Select(t => ...
- c++-多态的练习
多态的几个小练习 练习一 #include <iostream> #include <string> using namespace std; class Fu { publi ...
- 松软科技Web课堂:JavaScript 异常
JavaScript 错误 - Throw 和 Try to Catch try 语句使您能够测试代码块中的错误. catch 语句允许您处理错误. throw 语句允许您创建自定义错误. final ...
- 我如何通过K8S开发认证(CKAD)考试
题记:笔者最近经过3个多月的空余时间准备,终于通过了K8S开发认证(CKAD)的考试,在这里简单给大家分享一下经验. 一,先科普下CKAD 众所周知,Kubernetes在容器编排器大战中脱颖而出后, ...
- 微信 电脑版 HOOK(WeChat PC Hook)- 框架
软件构成:一个主进程exe和一个注入的dll主进程exe:把dll注入到微信,发送指令给dll,接受dll的信息注入的dll:被注入到微信内部,拦截微信的数据,调用微信的功能 接收主进程的指令,执行指 ...
- React劲爆新特性Hooks 重构去哪儿网火车票PWA
React劲爆新特性Hooks 重构去哪儿网火车票PWA 获取课程资料链接:点击这里获取 本课程先带你细数最近一年来React的新特性,如Hooks.Redux API,让你从头理解Hooks对传统R ...
- C#深入浅出之操作符和控制流程
操作符 操作符简单举例就是生活中的+-*/等等运算符号,下面会详细讨论运算符内容. 一元正负操作符 有时候需要改变数值的正负号.一元操作符(-)可以使得数字的正负号改变. 例如:int a = -11 ...
- vs2017 输出 ling to sql 转为执行的sql语句
在项目视图中,找到->输出 窗口,在窗口中选择ASP.NET Core Web服务器,调试项目即可看到执行的sql语句
- ES 6新语法
一.块级作用域绑定 回顾:使用var关键字定义变量 定义 = 声明 + 赋值: 1. 可以一次定义多个变量 2. 定义时可以只声明不赋值 3. 定义之后可以随时修改变量的值 4. 变量声明会被提升 ...