1. 分類

• 原生打印，window.print() 實(shí)現(xiàn)
• 插件實(shí)現(xiàn)，很多種，我這里選擇的是 jquery.print.js

優(yōu)缺點(diǎn)

原生打印的好處就不多說(shuō)了，簡(jiǎn)單方便，全屏打印，如果對(duì)打印功能沒(méi)有什么特殊要求可以直接使用即可；

使用插件的好處可以很方便的實(shí)現(xiàn)局部打印以及對(duì)各種功能的配置

項(xiàng)目需求
打印醫(yī)院報(bào)告單，單子上的內(nèi)容比較多，且會(huì)有 echarts 圖表；在表單的地步會(huì)展示列表數(shù)據(jù)表示圖表中標(biāo)注點(diǎn)的信息。且要求該列表信息另起一頁(yè)。

tips: 注意我標(biāo)注出來(lái)的知識(shí)點(diǎn)，echarts 在 print 的打印預(yù)覽中無(wú)法正常顯示，是一片空白。至于指定位置分頁(yè)，網(wǎng)上說(shuō)的增加代碼 style="page- break-before:awlays;" 或者是 style="page- break-after:awlays;"在指定位置分頁(yè)都嘗試過(guò)，之后的內(nèi)容雖然沒(méi)有在第一頁(yè)顯示但是預(yù)覽時(shí)的節(jié)面總數(shù)仍然是一頁(yè)（可能是我的用法有問(wèn)題或者瀏覽器有問(wèn)題，如果知道的小伙伴請(qǐng)告訴我，謝謝）

如何在成功打印出 echarts 表格數(shù)據(jù)

1.這個(gè)其實(shí)很好解決，大家搜一搜就能夠知道，主要就是把 echarts 圖表轉(zhuǎn)換成圖片，這里的一個(gè)注意點(diǎn)就是在打印完成或者取消打印的時(shí)候把生成的圖片去除并刪除圖片

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

// echarts 本身提供了把圖表轉(zhuǎn)換成圖片的方法
let image = new Image();
let imgSrc = this.logChartDialog.getDataURL();
image.src = imgSrc;
image.setAttribute("id", "printImage");
image.onload = function() {
  $("#dialogChartBottom").prepend(image);  // 把生成的圖片插入你想要打印的位置，這個(gè)根據(jù)自己實(shí)際情況
  image.style.display = "block";
  image.style.width = "100%";
  $("logChartDialog").css({
    display: 'none'
  })

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

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

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

如何分頁(yè)打印

1. 說(shuō)實(shí)話這個(gè)問(wèn)題困擾了我好久，網(wǎng)上說(shuō)的方法沒(méi)有用。后來(lái)我突然發(fā)現(xiàn)了 jquery.print.js 里提供了兩個(gè)屬性，分別是 append，在當(dāng)前打印內(nèi)容后追加內(nèi)容，格式是html，相信說(shuō)到這里有些小伙伴們已經(jīng)猜到了，沒(méi)猜到也沒(méi)關(guān)系，請(qǐng)看代碼

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

// echarts 本身提供了把圖表轉(zhuǎn)換成圖片的方法
let image = new Image();
let imgSrc = this.logChartDialog.getDataURL();
image.src = imgSrc;
image.setAttribute("id", "printImage");
image.onload = function() {
  $("#dialogChartBottom").prepend(image);  // 把生成的圖片插入你想要打印的位置，這個(gè)根據(jù)自己實(shí)際情況
  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,    // 預(yù)覽是否生成一個(gè) iframe 實(shí)現(xiàn)
    noPrintSelector: ".tipmsg-list-area",    // 這里是 jquery 選擇器的格式，表示不打印的內(nèi)容區(qū)域
    append: html,      // 在打印區(qū)域后添加內(nèi)容，格式是 html
  })

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

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

總結(jié)：以上即可在頁(yè)面的指定位置分頁(yè)。之前是即使內(nèi)容超過(guò)一頁(yè)但是預(yù)覽的總頁(yè)數(shù)還是一頁(yè)。如果有問(wèn)題可以留言。其他就是正常使用 echarts 的操作了