前端實現打印圖像功能

       前一段時間研究前端鏈接打印機，而後進行打印圖像的功能任務，往常打印功能都是後端生成相應的文檔，經過瀏覽器下載用文檔編輯器鏈接打印機實現，或者C++在後端生成文檔直接鏈接打印。而這一次倒是前端根據數據生成圖像文檔，前端經過瀏覽器鏈接打印機圖像，嘗試過幾種方法，還有一些問題，但特此總結一哈。

       前提：後臺返回是繪製醫用心電波形報告的數據，前端經過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是矢量圖，不依賴於像素，無限放大也不會失真。如純表單打印功能還比較容易實現鏈接打印機打印。