前提：后臺返回是繪制醫用心電波形報告的數據，前端通過canvas在網頁上繪制再進行打印并生成PDF文檔！

一.  嘗試LODOP打印插件

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

優點：可自定義打印內容和樣式，打印百分比也可以編輯；缺點：需下載安裝打印lodop打印軟件，頁面canvas的內容無法提取到打印區域；

二. 嘗試前端window.print()

優點：代碼編寫方便，如配合谷歌瀏覽器提供的打印功能，操作很方便；

缺點：如整頁有部分是打印內容，打印區域不方便控制，有一定失真；

三.嘗試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;  //根據圖片的尺寸設置pdf的規格，要在圖片加載成功時執行，之所以要*0.5是因為比例問題  img.onload = function () {  //此處需要注意，pdf橫置和豎置兩個屬性，需要根據寬高的比例來調整，不然會出現顯示不完全的問題   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') //比例可根據需要調節 //根據下載保存成不同的文件名 doc.save('pdf_' + new Date().getTime() + '.pdf') };})

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

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

總結：

canvas的繪圖嚴重依賴分辨率，如對svg操作比較熟悉的話，制圖的保真問題比較看重，建議使用svg方法,svg是矢量圖，不依賴于像素，無限放大也不會失真。如純表單打印功能還比較容易實現連接打印機打印。

以上所述是小編給大家介紹的前端實現打印圖像功能,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
如果你覺得本文對你有幫助，歡迎轉載，煩請注明出處，謝謝！