vue 前端实现打印功能

引言

近期在写 erp 功能后台，发现需要前端来实现打印进行单据打印，因此查询了一些方法，实现了前端打印操作

插件下载

1.html2canvas
2.print-js

页面使用

// 由于我要打印的页面是在 el-dialog 里面，因此需要获取 el-dialog 的宽高，防止打印不全
import html2canvas from 'html2canvas';
import printJS from 'print-js';

// 如果打印的内容中存在可滚动的表格，可以在 this.$nextTick 前把表格的高度设为 100% ，再在 this.$nextTick 里面设置回原来的表格高度
dayin () {
	this.$nextTick(() => {
      const printContent = document.getElementsByClassName('el-dialog')[0] as HTMLElement;

      // 获取dom 宽度 高度
      const width = printContent.clientWidth;
      const height = printContent.clientHeight;

      // 创建一个canvas节点
      const canvas = document.createElement('canvas') as any;

      // 定义任意放大倍数，支持小数；越大，图片清晰度越高，生成图片越慢。
      const scale = 4;
      // 定义canvas 宽度 * 缩放
      canvas.width = width * scale;
      // 定义canvas高度 *缩放
      canvas.height = height * scale;
      canvas.style.width = width * scale + 'px';
      canvas.style.height = height * scale + 'px';
      // 获取context,设置scale
      canvas.getContext('2d').scale(scale, 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
      })
        .then((canvas) => {
          const url = canvas.toDataURL('image/png');
          const style = '@page{size: auto; margin: 1cm}';
          printJS({
            printable: url,
            type: 'image',
            documentTitle: '', // 标题
            style
          });
        })
        .catch((err) => {
          console.error(err);
        });
    });
}

打印的内容里面存在线上图片资源，如果不想进行服务器配置，可在浏览器关闭获取缓存文件，保证每一次获取的都是线上文件，不会出现打印时报图片跨域的错误

注意，前端无法获取你点击打印或者取消的事件，只能获取你是否关闭打印框的事件

文章中如有不正确的地方，欢迎各位指出