jquery.wordexport.js打印echarts.js画出的柱状图。

echarts画出的图是不能直接打印出来的(echarts的柱状图是用canvas画出来的),而jquery.wordexport.js只能打印出图片,所以我先把echarts柱状图换成图片再去打印的。

用echarts.js的API中的getDataURL()方法:导出图表图片,返回一个 base64 的 URL,可以设置为Imagesrc

       <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画出的柱状图的更多相关文章

  1. 前端数据可视化echarts.js使用指南

    一.开篇 首先这里要感谢一下我的公司,因为公司需求上面的新颖(奇葩)的需求,让我有幸可以学习到一些好玩有趣的前端技术,前端技术中好玩而且比较实用的我想应该要数前端的数据可视化这一方面,目前市面上的数据 ...

  2. echarts.js(图表插件)2.0版会导致 ZeroClipboard.js(复制插件)失效,3.0版未知。

    解决方法:ZeroClipboard.js先于echarts.js加载.

  3. 百度推出的echarts,制表折线图柱状图饼图等的超级工具(转)

    一.简介: 1.绘制数据图表,有了它,想要网页上绘制个折线图.柱状图,从此easy. 2.使用这个百度的echarts.js插件,是通过把图片绘制在canvas上在显示在页面上. 官网对echarts ...

  4. jquery插件导出word:jquery.wordexport.js

    前言 今天项目中遇到一个需求把我们系统中的统计数据导出来(主要是表格).其实实现的的方法有很多,而此次针对我的系统第一获取数据有点慢,加上前不久写了一个在线阅读pdf,故此这次也想用前端的方式来导出. ...

  5. js jquery jquery.wordexport.js 实现导出word

    由于工作需要,将一个页面导出word文档,主要是简历!经过百度搜索之后,没找到结果,无奈之下只能求助Google,意外发现jquery一款插件可以实现这个功能!而且效果还算可以! 基本可以实现想要的功 ...

  6. 使用jquery.PrintArea.js打印网页的样式问题

    在使用jquery.PrintArea.js打印局部网页样式的时候,发现样式打印不出来,在网上找了好多资料,整理一下分享给大家 一.先看看css的引用文件方式 1.直接在内部的元素中使用”style” ...

  7. jQuery-jqprint.js打印插件使用高版本jQuery时问题

    使用jqprint打印插件的网页demo代码: <!doctype html> <html> <head> <meta charset="utf-8 ...

  8. 页面打印(js/jquery)

    1.js实现(可实现局部打印)  <html> <title>js打印</title> <head></head><body>  ...

  9. 使用 jquery.wordexport.js导出的Word排版

    js导出word文档所需要的两个插件: FileSaver.js jquery.wordexport.js 使用jquery.wordexport.js这个插件导出的word文档的排版方式: 编辑器打 ...

随机推荐

  1. Python面向对象-概念、类、实例

    OOP——Object Oriented Programming,面向对象编程,是一种程序设计思想.该思想将对象作为程序的基本单元,一个对象包含了数据和操作数据的函数. 区别于面向过程的程序设计即把计 ...

  2. 【代码审计】ESPCMSP8(易思企业建站管理系统)漏洞报告

    0x00简介 项目名称:ESPCMS-P8(易思企业建站管理系统) 测试平台:Windwos 版本信息:P8.19082801稳定版 更新时间:2019-08-30 00:56:32 网站官网:htt ...

  3. idea2019注册码,亲测可用!

    2019已经过半了,最近可把我忙死了,好久没打理这里的留言了. 今天登上来,看到许多同学反馈按照之前的那篇文章 IntelliJ IDEA 2018激活码 永久破解 里的步骤无法破解idea,其实用这 ...

  4. ubuntu下安装tomcat,shutdown时报错:./catalina.sh:1:eval:/home/xxx/jdk/jre/bin/java:not found

    该问题可能导致tomcat启动成功了,但是浏览器输入http://127.0.0.1:8080无法显示tomcat的欢迎界面 打开Tomcat安装目录下的bin文件下的setclasspath.sh, ...

  5. 看懂 游戏《Minecraft》的崩溃报告 服务端/客户端

    如何看懂Minecraft报错的关键信息. 让你如何看懂Minecraft报错 前言 一些俏皮话 寻找崩溃日志 打开崩溃日志 重要的事说三遍 下载文本编辑器 开始分析 深度分析 得出结论 修复报错 解 ...

  6. cinder安装与配置

    cinder是openstack中提供块存储服务的组件,主要是为虚拟机实例提供虚拟磁盘. 通过某种协议(SAS,SCSI,SAN,iSCSI等)挂接裸硬盘,然后分区.格式化创建的文件,或者直接使用裸硬 ...

  7. ReactNative: 使用弹出框组件ActionSheetIOS组件

    一.简介 在上一篇文章中,详细介绍了对话框组件,除此之外,React-Native系统还给开发者提供了一个弹框框组件ActionSheetIOS组件,它的弹出方式与对框框不同,它是从底部弹出,与iOS ...

  8. VMware Workstation15激活码

    VG5HH-D6E04-0889Y-QXZET-QGUC8 亲测可用

  9. 网站后台getshell

    phpmyadmin后台Getshell 获取 web 绝对路径 select @@basedir; 检测是否有写入权限 show global variables like 'secure%' ## ...

  10. 项目中遇到的问题:IDEA maven项目报错:程序包com.sun.image.codec.jpeg不存在

    错误截图: 解决方法:在pom.xml文件中间加上以下代码: 代码: <plugin> <groupId>org.apache.maven.plugins</groupI ...