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è)打印
- 說(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 的操作了