怎么在前端中實(shí)現(xiàn)一個(gè)打印圖像功能

本篇文章給大家分享的是有關(guān)怎么在前端中實(shí)現(xiàn)一個(gè)打印圖像功能，小編覺得挺實(shí)用的，因此分享給大家學(xué)習(xí)，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。

一.  嘗試LODOP打印插件

之前前端表單打印功能有使用過LODOP打印插件，需安裝相應(yīng)的LODOP的打印軟件，lodop的使用方法2種。第一種方式是通過收集前端標(biāo)簽內(nèi)容元素成對象 var   htmlstr= $("#ECGReport").html(); 通過 LODOP.ADD_PRINT_HTM(20,60, 400, 900,htmlstr); 的lodop方法導(dǎo)入到自帶編輯的打印軟件中進(jìn)行打印，當(dāng)然字體大小，顏色，加粗等都可以設(shè)置；第二種是自定義內(nèi)容，模板樣式已確定，可通過方法將打印內(nèi)容一塊塊放入到打印區(qū)域中， LODOP.ADD_PRINT_HTM(20,60, 400, 900,'生成報(bào)告標(biāo)題'); 并調(diào)節(jié)左右邊距;但是使用第一種方式收集標(biāo)簽元素內(nèi)容時(shí)候，發(fā)現(xiàn)不能收集到canvas里面的圖層樣式和內(nèi)容，并果斷放棄，如果網(wǎng)頁無canvas繪制內(nèi)容，可使用；

優(yōu)點(diǎn)：可自定義打印內(nèi)容和樣式，打印百分比也可以編輯；缺點(diǎn)：需下載安裝打印lodop打印軟件，頁面canvas的內(nèi)容無法提取到打印區(qū)域；

二. 嘗試前端window.print()

優(yōu)點(diǎn)：代碼編寫方便，如配合谷歌瀏覽器提供的打印功能，操作很方便；

缺點(diǎn)：如整頁有部分是打印內(nèi)容，打印區(qū)域不方便控制，有一定失真；

三.嘗試html2canvas + jsPDF.js

html2canvas(document.querySelector('#modelContents'), {
   allowTaint: true, taintTest: false, scale: '1', dpi: '300', background: '#fff'}
) .then(function(canvas) {  
//元素id為exportContent 
 let ctx =canvas.getContext("2d"); 
 var imgData = canvas.toDataURL('image/png') var img = new Image() 
 var contentWidth = canvas.width; var contentHeight = canvas.height;
 img.src = imgData; 
 $("#ECGReport").append(img); 
 img.width =1000; img.height = 740; 
 //a4紙的尺寸[595.28,841.89]，html頁面生成的canvas在pdf中圖片的寬高
 var imgWidth = 595.28;
 var imgHeight = 555.28/contentWidth * contentHeight; 
 //根據(jù)圖片的尺寸設(shè)置pdf的規(guī)格，要在圖片加載成功時(shí)執(zhí)行，之所以要*0.5是因?yàn)楸壤龁栴} 
 img.onload = function () { 
 //此處需要注意，pdf橫置和豎置兩個(gè)屬性，需要根據(jù)寬高的比例來調(diào)整，不然會出現(xiàn)顯示不完全的問題 
  var doc=''
 if (this.width > this.height) { 
   doc = new jsPDF('l','px', [1000, 720]) 
  } else {
   doc = new jsPDF('p','pt', [4000, 2960]) 
  }
  doc.addImage(imgData, 'png', 30, 40, 500, 360,'NONE') //比例可根據(jù)需要調(diào)節(jié)
 //根據(jù)下載保存成不同的文件名 doc.save('pdf_' + new Date().getTime() + '.pdf') };})

通過html2canvas的方法將canvas和表單內(nèi)容提取出并轉(zhuǎn)成圖片，canvas內(nèi)容不會丟失，為了防止圖像內(nèi)容失真嚴(yán)重，將原圖內(nèi)容放大倍數(shù)之后提取，放大倍數(shù)的計(jì)算可通過A4紙張的大小和打印機(jī)的分辨率300dpi等參數(shù)算出差不多為4倍，1920*1080的電腦屏幕dpi一般為72dpi,通過jsPDF的方法將圖片導(dǎo)入到PDF文檔中；

其實(shí)也可以通過jsPDF的方法去編輯報(bào)告單中的患者姓名等信息，同樣canvas內(nèi)容繪制邏輯也可以通過jsPDF的方法去實(shí)現(xiàn)，但是jsPDF對中文不支持需下載使用的 ttf字體文件到項(xiàng)目中，比較繁瑣和不方便；缺點(diǎn)：雖實(shí)現(xiàn)大體需求，但是生成的波形圖像還是有失真和鋸齒現(xiàn)象，是canvas繪制中不可避免。

以上就是怎么在前端中實(shí)現(xiàn)一個(gè)打印圖像功能，小編相信有部分知識點(diǎn)可能是我們?nèi)粘９ぷ鲿姷交蛴玫降?。希望你能通過這篇文章學(xué)到更多知識。更多詳情敬請關(guān)注億速云行業(yè)資訊頻道。