前端實(shí)現(xiàn)指定位置分頁(yè)、多頁(yè)打印功能(jquery.print.js)

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),echartsprint 的打印預(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 的操作了

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。