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 hover如何触发事件?
vue中并没有 @hover 事件,但是可以使用 @mouseenter 和 @mouseleave 来模拟hover操作.
- c++-内联函数和函数重载和默认参数和函数指针
内联函数 C++ 内联函数是通常与类一起使用.如果一个函数是内联的,那么在编译时,编译器会把该函数的代码副本放置在每个调用该函数的地方. 对内联函数进行任何修改,都需要重新编译函数的所有客户端,因为编 ...
- 开源框架 openFrameworks
转自:https://www.cnblogs.com/lidabo/p/9134174.html 此处仅供学习,版权属原作者: 作为一个图形图像方向的研究生,我经常都在和 OpenGL .OpenCV ...
- ProjectServer2010升级到ProjectServer2016,Sharepoint2010升级到Sharepoint2016第三章
继续上一章,转换了身份认证模式后继续将WSS_Content备份还原到2016数据库服务器上升级,发现还是报错,报错截图如下: 查看日志,提到某些网站集还体验还是2010的,需要升级,可是我明明升级了 ...
- React每隔0.2s颜色变淡 之生命周期 ,componentDidMount表示组件已经挂载
05案例 每隔0.2s颜色变淡 componentDidMount表示组件已经挂载,可以进行DOM操作 import React, { Component } from "react&quo ...
- javascript 获取function的所在文件,并读取代码文件
1.通过func.toString()可以获取function代码 2.要获取所在文件,需要错误调用func,根据堆栈可以获取 堆栈信息类似: at module.exports.data (d:\P ...
- 整理h5移动端适配方案
<使用Flexible实现手淘H5页面的终端适配>:https://github.com/amfe/article/issues/17 <再聊移动端页面的适配>:https:/ ...
- telerik reporting 在.net core api 使用
工具要求:telerik reporting R3 2019..net core 2.2 .vs2017 最新版 从官网下载下来的的telerik reporting 的.net core 例子是 ...
- JavaWeb学习——在Eclipse里使用Tomcat
JavaWeb学习——在Eclipse里使用Tomcat 摘要:本文主要学习了如何在Eclipse里使用Tomcat服务器. 添加Tomcat 打开Eclipse的配置页面,点击菜单上的“Window ...
- 从0系统学Android--4.1探究碎片
从0系统学Android--4.1探究碎片 本系列文章目录:更多精品文章分类 本系列持续更新中.... 初级阶段内容参考<第一行代码> 第四章:手机平板要兼顾--探究碎片 平板电脑和手机最 ...