前端实现指定位置分页、多页打印功能（jquery.print.j

1. 分类

• 原生打印，window.print() 实现
• 插件实现，很多种，我这里选择的是 jquery.print.js

优缺点

原生打印的好处就不多说了，简单方便，全屏打印，如果对打印功能没有什么特殊要求可以直接使用即可；

使用插件的好处可以很方便的实现局部打印以及对各种功能的配置

项目需求
打印医院报告单，单子上的内容比较多，且会有 echarts 图表；在表单的地步会展示列表数据表示图表中标注点的信息。且要求该列表信息另起一页。

tips: 注意我标注出来的知识点，echarts 在 print 的打印预览中无法正常显示，是一片空白。至于指定位置分页，网上说的增加代码 style="page- break-before:awlays;" 或者是 style="page- break-after:awlays;"在指定位置分页都尝试过，之后的内容虽然没有在第一页显示但是预览时的节面总数仍然是一页（可能是我的用法有问题或者浏览器有问题，如果知道的小伙伴请告诉我，谢谢）

如何在成功打印出 echarts 表格数据

1.这个其实很好解决，大家搜一搜就能够知道，主要就是把 echarts 图表转换成图片，这里的一个注意点就是在打印完成或者取消打印的时候把生成的图片去除并删除图片

// html
<div class="chart-area" ref="logChartDialog" id="logChartDialog"></div>

// echarts 本身提供了把图表转换成图片的方法
let image = new Image();
let imgSrc = this.logChartDialog.getDataURL();
image.src = imgSrc;
image.setAttribute("id", "printImage");
image.onload = function() {
  $("#dialogChartBottom").prepend(image);  // 把生成的图片插入你想要打印的位置，这个根据自己实际情况
  image.style.display = "block";
  image.style.width = "100%";
  $("logChartDialog").css({
    display: 'none'
  })

  $('#printRecord').print({    // 注意这里使用需要引入 jquery.print.min.js，指定打印范围
    globalStyle: true,
    mediaPrint: true,
    iframe: true,
  })

  // 打印结束
  $("#logChartDialog").css({
    display: 'block'
  });

  image.style.display = 'none';
  $('#printImage').remove();
}

如何分页打印

1. 说实话这个问题困扰了我好久，网上说的方法没有用。后来我突然发现了 jquery.print.js 里提供了两个属性，分别是 append，在当前打印内容后追加内容，格式是html，相信说到这里有些小伙伴们已经猜到了，没猜到也没关系，请看代码

// html
<div class="chart-area" ref="logChartDialog" id="logChartDialog"></div>

// echarts 本身提供了把图表转换成图片的方法
let image = new Image();
let imgSrc = this.logChartDialog.getDataURL();
image.src = imgSrc;
image.setAttribute("id", "printImage");
image.onload = function() {
  $("#dialogChartBottom").prepend(image);  // 把生成的图片插入你想要打印的位置，这个根据自己实际情况
  image.style.display = "block";
  image.style.width = "100%";
  $("logChartDialog").css({
    display: 'none'
  })

  let html = $(".tipmsg-list-area").html();

  $('#printRecord').print({    // 注意这里使用需要引入 jquery.print.min.js，指定打印范围
    globalStyle: true,    
    mediaPrint: true,
    iframe: true,    // 预览是否生成一个 iframe 实现
    noPrintSelector: ".tipmsg-list-area",    // 这里是 jquery 选择器的格式，表示不打印的内容区域
    append: html,      // 在打印区域后添加内容，格式是 html
  })

  // 打印结束
  $("#logChartDialog").css({
    display: 'block'
  });

  image.style.display = 'none';
  $('#printImage').remove();
}

总结：以上即可在页面的指定位置分页。之前是即使内容超过一页但是预览的总页数还是一页。如果有问题可以留言。其他就是正常使用 echarts 的操作了