Vue——printjs打印el-table,echarts等打印不全,异常解决

文章介绍了如何使用Print.js库进行简单打印,并提供了针对Echarts图表和el-table表格打印时的解决方案。对于Echarts,通过将canvas转换为图片来实现打印;对于el-table,提出了修改Print.js源码以适应表格宽度和防止内容截断的三种方法,包括直接修改、转换为table和结合html2canvas转图片。
摘要由CSDN通过智能技术生成

PrintJs简单使用

PrintJs官网地址:https://printjs.crabbly.com/

1、可以从GitHub版本下载最新版本的Print.js:https://github.com/crabbly/Print.js/releases
2、npm 安装

npm install print-js --save

更多参考:https://blog.csdn.net/sunxiaoju/article/details/126284860

echarts无法打印解决

修改print.js的getHtml,增加对canvas的处理,将echarts转为图片:

 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].parentNode.insertBefore(img,canvass[k4].nextElementSibling);
        }
    },

el-table打印不全

方法一:修改print.js的getHtml方法,增加对表格的宽度处理
getHtml: function () {
        var inputs = document.querySelectorAll('input');
        var textareas = document.querySelectorAll('textarea');
        var selects = document.querySelectorAll('select');
        let cells = document.querySelectorAll('.cell');

        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')
                        }
                    }
                }
            }
        }

        const tableNode = document.querySelectorAll('.el-table__header,.el-table__body');
        //el-table 打印不全的问题
        for(let k6 = 0 ; k6 < tableNode.length ; k6++){
            const tableItem = tableNode[k6] ;
            tableItem.style.width = '100%';
            const  child = tableItem.childNodes;
            for (let i = 0; i < child.length; i++) {
                const  element = child[i];
                if(element.localName === 'colgroup'){
                    element.innerHTML = '';
                }
            }
        }
        //el-table 格子里面打印超过格子的问题
        for(let k7 = 0 ; k7 < cells.length ; k7 ++){
            const cell = cells[k7] ;
            cell.style.width = '100%';
            cell.removeAttribute('style')
        }

        return this.dom.outerHTML;
    },
方法二:将el-table改为table

具体实现参考:https://blog.csdn.net/admin11196/article/details/116168923

方法三:结合html2Canvas将打印的页面转为图片

这条同样可以解决echarts不能打印问题,算是万能之法了吧,相对前面几种方式赶紧这个方法最简单,打印效果也比较理想。

1、首先需要安装html2canvas 和print-js 插件并引入,配置请参考文档:https://github.com/niklasvh/html2canvas
2、写一个打印公共方法:

//html转图片打印(解决element table打印不全的问题)
import html2canvas from "html2canvas";
import printJS from "print-js";

/**
 * html转图片
 * @param printContent
 * @param callback
 */
export const html2Canvas = (printContent, callback) => {
  // 获取dom 宽度 高度
  const width = printContent.clientWidth;
  const height = printContent.clientHeight;
  // 创建一个canvas节点
  const canvas = document.createElement("canvas");

  const scale = 4; // 定义任意放大倍数,支持小数;越大,图片清晰度越高,生成图片越慢。
  canvas.width = width * scale; // 定义canvas 宽度 * 缩放
  canvas.height = height * scale; // 定义canvas高度 *缩放
  canvas.style.width = width * scale + "px";
  canvas.style.height = height * scale + "px";
  canvas.getContext("2d").scale(scale, scale); // 获取context,设置scale

  const scrollTop =
    document.documentElement.scrollTop || document.body.scrollTop; // 获取滚动轴滚动的长度
  const scrollLeft =
    document.documentElement.scrollLeft || document.body.scrollLeft; // 获取水平滚动轴的长度

  html2canvas(printContent, {
    canvas,
    backgroundColor: null,
    useCORS: true,
    windowHeight: document.body.scrollHeight,
    scrollX: -scrollLeft, // 解决水平偏移问题,防止打印的内容不全
    scrollY: -scrollTop
    //background: "#ffffff", // 一定要添加背景颜色,否则出来的图片,背景全部都是透明的
  })
    .then(canvas => {
      const url = canvas.toDataURL("image/png");
      //console.log("canvas url :" + url);
      callback({ url: url });
    })
    .catch(err => {
      console.error(err);
    });
};

/**
 * 用printJs打印图片
 * @param url
 * @param callback
 */
export const printImg = (url, callback) => {
  printJS({
    printable: url,
    type: "image",
    documentTitle: "", // 标题
    style: "@page{size:auto;margin: 1cm ;}", // 去除页眉页脚
    onStart: () => {
      console.log("打印开始");
    },
    onEnd: () => {
      console.log("打印完成");
    }
  });
};

/**
 * html转图片打印
 * @param dom
 * @param callback
 */
export const html2CanvasPrint = (dom, callback) => {
  //1、html转图片
  html2Canvas(dom, canvasRes => {
    //2、打印图片
    printImg(canvasRes.url, callback);
  });
};

3、调用方法:

html2Canvas(this.$refs.printDom, res => {
	this.printDomUrl = res.url;
	printImg(res.url, printRes => {});
});

更多内容参考:https://blog.csdn.net/weixin_40466351/article/details/115908035

注意:遇到大坑啊,html转图片的方式在windows上面打印预览没有任何问题,但是在Mac上面所有的字体间距均被放大,页面简直错的离谱啊,无奈又换回方法二,通过调整dom打印缩放解决了。

具体方法如下:

  1. 修改print.js的getHtml方法,参考方法一的内容;

  2. 在开始打印前缩小dom的尺寸;打印结束后恢复dom的原尺寸;

    print.js监听打印预览的关键代码:

const Print = function (dom, options) {
    if (!(this instanceof Print)) return new Print(dom, options);

    this.options = this.extend({
        'noPrint': '.no-print',
        onStart: function () {},//打印开始监听回调
        onEnd: function () {}//打印结束监听回调(打印预览中点击“打印”或“取消”都可以回调)
    }, options);

    if ((typeof dom) === "string") {
        this.dom = document.querySelector(dom);
    } else {
        this.isDOM(dom)
        this.dom = this.isDOM(dom) ? dom : dom.$el;
    }

    this.init();
};

toPrint: function (frameWindow) {
	let _this = this;
	try {
	    setTimeout(function () {
	        frameWindow.focus();
	        typeof _this.options.onStart === 'function' && _this.options.onStart();
	        try {
	            if (!frameWindow.document.execCommand('print', false, null)) {
	                frameWindow.print();
	            }
	        } catch (e) {
	            frameWindow.print();
	        }
	        typeof _this.options.onEnd === 'function' && _this.options.onEnd();
	        frameWindow.close();
	    }, 10);
	} catch (err) {
	    console.log('err', err);
	}
    },

核对你的print.js文件是否包含了上述监听回调的内容,没有的话自行加上。
打印过程修改dom尺寸方法:

//由于打印内容宽度过大,所以打印前先将dom缩小,打印完成之后恢复原尺寸
this.$refs.printDom.style.zoom = 0.6;

this.$print(this.$refs.printDom, {
  type: "html",
  documentTitle: "", // 标题
  style: "@page{size:auto;margin: 1cm ; size: }", // 去除页眉页脚
  onStart: () => {
    console.log("打印开始");
  },
  onEnd: () => {
    console.log("打印完成");
    this.$refs.printDom.style.zoom = 1;
  }
});

最后还需注意一个点,你的打印内容遇到分页时如果出现被截断的情况下,需要处理下,在任何你不想截断的模块中加上如下css代码即可;

//避免打印截断
page-break-inside: avoid;
page-break-after: avoid;
page-break-before: avoid;

扩展:修改打印表格样式

参考:https://blog.csdn.net/huyande123/article/details/103423362
简单总结的说下:页面打印样式缺失可能是打印时新建的一个dom对象没有将原来的页面样式传递过来,可以通过将一些相关的CSS传递到document.write()方法中的新窗口来解决这个问题。
关键代码:

var divToPrint = document.getElementById('box');
var htmlToPrint = '' +
    '<style type="text/css">' +
        'table {'+
        'border-right:1px solid #000;' +
        'border-bottom:1px solid #000;'+
        '}' +
        'table td{'+
            'border-left:1px solid #000;'+
            'border-top:1px solid #000'+
        '}'+
    '</style>';
htmlToPrint += divToPrint.outerHTML;
newWin = window.open("");
newWin.document.write(htmlToPrint);
newWin.print();
newWin.close();
评论 10
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值