91超碰碰碰碰久久久久久综合_超碰av人澡人澡人澡人澡人掠_国产黄大片在线观看画质优化_txt小说免费全本

溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

怎么在前端中實現一個打印圖像功能

發布時間:2021-04-19 17:45:31 來源:億速云 閱讀:320 作者:Leah 欄目:web開發

本篇文章給大家分享的是有關怎么在前端中實現一個打印圖像功能,小編覺得挺實用的,因此分享給大家學習,希望大家閱讀完這篇文章后可以有所收獲,話不多說,跟著小編一起來看看吧。

一.  嘗試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繪制中不可避免。

以上就是怎么在前端中實現一個打印圖像功能,小編相信有部分知識點可能是我們日常工作會見到或用到的。希望你能通過這篇文章學到更多知識。更多詳情敬請關注億速云行業資訊頻道。

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

丰宁| 台东县| 西华县| 桑日县| 三原县| 莱芜市| 乡宁县| 乌兰县| 苏州市| 收藏| 肥东县| 大方县| 苗栗市| 安溪县| 临武县| 凤山市| 台南市| 长兴县| 梅河口市| 长顺县| 万宁市| 获嘉县| 洛阳市| 赤水市| 碌曲县| 宝坻区| 崇阳县| 伊川县| 德钦县| 清新县| 西乌珠穆沁旗| 梅河口市| 石门县| 太白县| 万源市| 江孜县| 旌德县| 宁晋县| 慈利县| 礼泉县| 盘锦市|