vue print.js打印支持Echarts图表操作


Posted in Javascript onNovember 13, 2020

网上找的print.js做了修改,支持Echarts图表这里记录一下,不知道是哪家的代码了,我看都一样

这里是看到了两个源码

https://github.com/xyl66/vuePlugs_printjs/blob/master/print.js

https://github.com/denghao123/Print.js

以下是我修改过的

print.js

// 打印类属性、方法定义
/* eslint-disable */
const Print = function (dom, options) {
 if (!(this instanceof Print)) return new Print(dom, options);
 
 this.options = this.extend({
 'noPrint': '.no-print'
 }, options);
 
 if ((typeof dom) === "string") {
 this.dom = document.querySelector(dom);
 } else {
 this.isDOM(dom)
 this.dom = this.isDOM(dom) ? dom : dom.$el;
 }
 
 this.init();
};
Print.prototype = {
 init: function () {
 var content = this.getStyle() + this.getHtml();
 this.writeIframe(content);
 },
 extend: function (obj, obj2) {
 for (var k in obj2) {
  obj[k] = obj2[k];
 }
 return obj;
 },
 
 getStyle: function () {
 var str = "",
  styles = document.querySelectorAll('style,link');
 for (var i = 0; i < styles.length; i++) {
  str += styles[i].outerHTML;
 }
 str += "<style>" + (this.options.notPrint ? this.options.notPrint : '.no-print') + "{display:none;}</style>";
 str += "<style>.results{width:100%!important;} .result .title{width:100%;}</style>";
 
 return str;
 },
 
 getHtml: function () {
 var inputs = document.querySelectorAll('input');
 var textareas = document.querySelectorAll('textarea');
 var selects = document.querySelectorAll('select');
 var canvass = document.querySelectorAll('canvas');
 for (var k = 0; k < inputs.length; k++) {
  if (inputs[k].type == "checkbox" || inputs[k].type == "radio") {
  if (inputs[k].checked == true) {
   inputs[k].setAttribute('checked', "checked")
  } else {
   inputs[k].removeAttribute('checked')
  }
  } else if (inputs[k].type == "text") {
  inputs[k].setAttribute('value', inputs[k].value)
  } else {
  inputs[k].setAttribute('value', inputs[k].value)
  }
 }
 
 for (var k2 = 0; k2 < textareas.length; k2++) {
  if (textareas[k2].type == 'textarea') {
  textareas[k2].innerHTML = textareas[k2].value
  }
 }
 
 for (var k3 = 0; k3 < selects.length; k3++) {
  if (selects[k3].type == 'select-one') {
  var child = selects[k3].children;
  for (var i in child) {
   if (child[i].tagName == 'OPTION') {
   if (child[i].selected == true) {
    child[i].setAttribute('selected', "selected")
   } else {
    child[i].removeAttribute('selected')
   }
   }
  }
  }
 }
 //canvass echars图表转为图片
 for (var k4 = 0; k4 < canvass.length; k4++) {
  var imageURL = canvass[k4].toDataURL("image/png");
  var img = document.createElement("img");
  img.src = imageURL;
  img.setAttribute('style', 'max-width: 100%;');
  img.className = 'isNeedRemove'
  // canvass[k4].style.display = 'none'
  // canvass[k4].parentNode.style.width = '100%'
  // canvass[k4].parentNode.style.textAlign = 'center'
  canvass[k4].parentNode.insertBefore(img,canvass[k4].nextElementSibling);
 }
 //做分页
 //style="page-break-after: always"
 var pages = document.querySelectorAll('.result');
 for (var k5 = 0; k5 < pages.length; k5++) {
  pages[k5].setAttribute('style', 'page-break-after: always');
 }
 return this.dom.outerHTML;
 },
 
 writeIframe: function (content) {
 var w, doc, iframe = document.createElement('iframe'),
  f = document.body.appendChild(iframe);
 iframe.id = "myIframe";
 //iframe.style = "position:absolute;width:0;height:0;top:-10px;left:-10px;";
 iframe.setAttribute('style', 'position:absolute;width:' + document.querySelector('.results').clientWidth + 'px;height:0;top:-10px;left:-10px;');
 w = f.contentWindow || f.contentDocument;
 doc = f.contentDocument || f.contentWindow.document;
 doc.open();
 doc.write(content);
 doc.close();
 
 var removes = document.querySelectorAll('.isNeedRemove');
 for (var k = 0; k < removes.length; k++) {
  removes[k].parentNode.removeChild(removes[k]);
 }
 
 var _this = this
 iframe.onload = function(){
  _this.toPrint(w);
  setTimeout(function () {
  document.body.removeChild(iframe)
  }, 100)
 }
 },
 
 toPrint: function (frameWindow) {
 try {
  setTimeout(function () {
  frameWindow.focus();
  try {
   if (!frameWindow.document.execCommand('print', false, null)) {
   frameWindow.print();
   }
  } catch (e) {
   frameWindow.print();
  }
  frameWindow.close();
  }, 10);
 } catch (err) {
  console.log('err', err);
 }
 },
 isDOM: (typeof HTMLElement === 'object') ?
 function (obj) {
  return obj instanceof HTMLElement;
 } :
 function (obj) {
  return obj && typeof obj === 'object' && obj.nodeType === 1 && typeof obj.nodeName === 'string';
 }
};
const MyPlugin = {}
MyPlugin.install = function (Vue, options) {
 // 4. 添加实例方法
 Vue.prototype.$print = Print
}
export default MyPlugin

用法

this.$print(this.$refs.print,{'notPrint':'.el-button, .el-select'})

我这里取消显示了一些按钮和选择框,

页面是这样

vue print.js打印支持Echarts图表操作

打印出来是这样

vue print.js打印支持Echarts图表操作

可以看到页面是27,我在print.js加了

var pages = document.querySelectorAll('.result');
 for (var k5 = 0; k5 < pages.length; k5++) {
  pages[k5].setAttribute('style', 'page-break-after: always');
 }

用来分页,避免每块显示不完整被分割。

补充知识:vue项目中遇到的打印,以及处理重新排版后不显示echarts图片问题。

1. 项目中用到的打印

页面:

vue print.js打印支持Echarts图表操作

css: 控制好宽度一般A4 我调试的是794px多了放不下,小了填不满。当时多页打印的时候,一定要控制好每一个页面内容显示的高度不要超过一个页面,当然根据自己项目来。

由于我的项目是每一个页面固定一个页尾部,所以当显示的时候正常排版显示。但是一旦点击了打印预览需要修改这个区域的css让他固定在每一个页面的底部。

vue print.js打印支持Echarts图表操作

vue print.js打印支持Echarts图表操作

js代码,点击打印后执行(如果右键点击打印就会乱,所以给一个打印预览按钮让用户直接点):打印前先给要打印区域排版,这样预览打印的时候就不会乱,只打印要打印的内容。然后延迟调用系统的打印预览后即便用户没有打印,页面已经排好版了 这个时候右键打印也是可以的了。

print(){
  var that = this;
  $('.operatorBox').css({ //从新绘制这块区域让它固定在每一个页面底部
   'position':'fixed',
   'bottom':'15px'
  })//此方法仅限单页
  var div_print = document.getElementById('print-area');
  var newstr = div_print.innerHTML;
  var oldstr = document.body.innerHTML;
  document.body.innerHTML = newstr;
  // that.showCharts()
  // console.log(this.imgBase)
  // 吧charts图表弄成图片,在挨边替换空白图表
  /* Object.keys(this.imgBase).forEach(function(key){
   document.getElementById(key).innerHTML="<img style='width:100%' src="+that.imgBase[key]+">"
  }); */ 

  setTimeout(function(){
   window.print(); 
   alert('如未打印,请右键选择打印!')
   // window.location.reload();
   // document.body.innerHTML = oldstr;
  },1000)
 }

效果:

vue print.js打印支持Echarts图表操作

取消打印后页面排版已经改变了:

vue print.js打印支持Echarts图表操作

2. echarts打印,echarts如果是直接打印没问题,但是大多数情况是需要重新排列要打印的(就是不直接打印页面显示的,需要自定义打印内容),自定义打印的时候需要拿到要打印的html从新排版,但是这个时候拿不到echarts生成的图的,会显示空白。

所以解决方案是利用echarts的转成图片功能,提前把canvas图表转成图片,记录下来然后在从新排列的时候从新替换,或者是当echarts生成图片的时候立马换掉(这样处理显示效果不好)。

下面我的处理是把得到的图片全部按照echarts的id记录到一个对象里面,到时候在统一获取:

vue print.js打印支持Echarts图表操作

以上这篇vue print.js打印支持Echarts图表操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
日期函数扩展类Ver0.1.1
Sep 07 Javascript
input的focus方法使用
Mar 13 Javascript
javascript suggest效果 自动完成实现代码分享
Feb 17 Javascript
javascript学习笔记(十四) window对象使用介绍
Jun 20 Javascript
javascript中call和apply方法浅谈
Sep 27 Javascript
jQuery限制图片大小的方法
May 25 Javascript
jQuery 如何实现一个滑动按钮开关
Dec 01 Javascript
Angular4学习笔记之实现绑定和分包
Aug 01 Javascript
vue组件jsx语法的具体使用
May 21 Javascript
详解小程序开发经验:多页面数据同步
May 18 Javascript
Vue form表单动态添加组件实战案例
Sep 02 Javascript
Vue使用虚拟dom进行渲染view的方法
Dec 26 Javascript
vue 中使用print.js导出pdf操作
Nov 13 #Javascript
详解vue中在父组件点击按钮触发子组件的事件
Nov 13 #Javascript
Vue中nprogress页面加载进度条的方法实现
Nov 13 #Javascript
解决vue打包 npm run build-test突然不动了的问题
Nov 13 #Javascript
vue封装自定义指令之动态显示title操作(溢出显示,不溢出不显示)
Nov 12 #Javascript
解决vuex刷新数据消失问题
Nov 12 #Javascript
微信小程序对图片进行canvas压缩的方法示例详解
Nov 12 #Javascript
You might like
php无限级评论嵌套实现代码
2018/04/18 PHP
jQuery学习7 操作JavaScript对象和集合的函数
2010/02/07 Javascript
基于JQuery的密码强度验证代码
2010/03/01 Javascript
可以用来调试JavaScript错误的解决方案
2010/08/07 Javascript
javascript 主动派发事件总结
2011/08/09 Javascript
js判断运行jsp页面的浏览器类型以及版本示例
2013/10/30 Javascript
jquery sortable的拖动方法示例详解
2014/01/16 Javascript
javascript数组去重方法终极总结
2014/06/05 Javascript
JQuery使用index方法获取Jquery对象数组下标的方法
2015/05/18 Javascript
js实现文本框只允许输入数字并限制数字大小的方法
2015/08/19 Javascript
解析Node.js基于模块和包的代码部署方式
2016/02/16 Javascript
详解JS数据类型的值拷贝函数(深拷贝)
2017/07/13 Javascript
详解Angular2表单-模板驱动的表单(Template-Driven Forms)
2017/08/04 Javascript
vue的状态管理模式vuex
2017/11/30 Javascript
JS实现移动端点击按钮复制文本内容
2019/07/28 Javascript
JS获取动态添加元素的方法详解
2019/07/31 Javascript
js动态添加带圆圈序号列表的实例代码
2021/02/18 Javascript
[10:39]DOTA2上海特级锦标赛音乐会纪录片
2016/03/21 DOTA
Python进阶_关于命名空间与作用域(详解)
2017/05/29 Python
Python字典循环添加一键多值的用法实例
2019/01/20 Python
华为2019校招笔试题之处理字符串(python版)
2019/06/25 Python
python 判断字符串中是否含有汉字或非汉字的实例
2019/07/15 Python
python flask几分钟实现web服务的例子
2019/07/26 Python
python 实现的IP 存活扫描脚本
2020/12/10 Python
利用python绘制正态分布曲线
2021/01/04 Python
python excel和yaml文件的读取封装
2021/01/12 Python
加拿大领先的优质厨具产品在线购物网站:Golda’s Kitchen
2017/11/17 全球购物
过程装备与控制工程专业求职信
2014/07/02 职场文书
讲文明知礼仪演讲稿
2014/09/13 职场文书
2014年会计人员工作总结
2014/12/10 职场文书
超强台风观后感
2015/06/09 职场文书
教师节表彰会主持词
2015/07/06 职场文书
员工担保书范本
2015/09/22 职场文书
导游词之黄果树瀑布
2019/09/20 职场文书
详解TS数字分隔符和更严格的类属性检查
2021/05/06 Javascript
Python识别花卉种类鉴定网络热门植物并自动整理分类
2022/04/08 Python