html 打印相關(guān)操作與實(shí)現(xiàn)詳解
發(fā)布時(shí)間:2020-02-19 16:27:05 作者:佚名
我要評(píng)論

這篇文章主要介紹了html 打印相關(guān)操作與實(shí)現(xiàn)詳解,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
原理為調(diào)用 window.print() 方法,但是該方法只能對(duì)當(dāng)前頁(yè)面全部打印,所以有了以下方案來(lái)解決局部打印
1: 利用 iframe 將需要打印的元素和樣式注入 再調(diào)用打印
// 示例代碼 function print () { let ifElement = document.getElementById('ifId') const addHtmlPrint = () => { const content = ifElement.contentWindow || ifElement.contentDocument content.document.body.innerHTML = this.detailTable const styleEle = document.createElement('style') /* 去掉打印時(shí)的頁(yè)頭和頁(yè)腳 */ styleEle.innerHTML = '@media print {@page { margin: 5mm; }}' content.document.getElementsByTagName('head')[0].appendChild(styleEle) /* 保障 iframe 中資源加載完成,圖片要用 img 形式引入 */ ifElement.onload = () => { content.print() } } this.getDetailTable() if (ifElement) { // 若已經(jīng)創(chuàng)建,則直接打印 addHtmlPrint() } else { ifElement = document.createElement('iframe') ifElement.setAttribute('id', 'ifId') ifElement.setAttribute('style', 'display:none') document.body.appendChild(ifElement) addHtmlPrint() } }
2: 利用 @media print,在當(dāng)前頁(yè)面設(shè)置打印操作時(shí)需要隱藏的元素
@media print{ /* 這里將不需要打印的元素設(shè)置為不顯示 */ .hidden-element{ display:none; /* visibility:hidden; */ } /*紙張?jiān)O(shè)置為寬1200px 高800px*/ @page{ size:1200px 800px; } }
- <link href="/example.css" media="print" rel="stylesheet" /> 標(biāo)注打印時(shí)才會(huì)采用的樣式
- 監(jiān)聽打印事件 window.addEventListener('beforeprint|| afterprint', ()=> {});
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
html2canvas生成清晰的圖片實(shí)現(xiàn)打印的示例代碼
這篇文章主要介紹了html2canvas生成清晰的圖片實(shí)現(xiàn)打印的示例代碼,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著2019-09-30html2 canvas生成清晰的圖片實(shí)現(xiàn)打印功能
html2canvas是一個(gè)非常強(qiáng)大的截圖插件,很多生成圖片和打印的場(chǎng)景會(huì)用到它。接下來(lái)通過本文給大家介紹html2 canvas生成清晰的圖片實(shí)現(xiàn)打印功能,感興趣的朋友跟隨小編一起2019-09-23- 這篇文章主要介紹了前端實(shí)現(xiàn)打印圖像功能,需要的朋友可以參考下2019-08-27
一個(gè)不錯(cuò)的html 打印代碼支持翻頁(yè)
這篇文章主要介紹了一個(gè)不錯(cuò)的html 打印代碼支持翻頁(yè),非常實(shí)用,需要的朋友可以參考下2014-09-17- 打印屬性 打印 HTML 文檔總是會(huì)出現(xiàn)問題。在 CSS2 中,我們可以借助打印屬性讓打印 web 內(nèi)容更容易一些。 屬性 描述 值 orphans 設(shè)置元素放在頁(yè)面底部時(shí)所允許的最少文2009-07-13
將XHTML CSS頁(yè)面轉(zhuǎn)換為打印機(jī)頁(yè)面
在以前,為Web頁(yè)面創(chuàng)建一個(gè)打印機(jī)友好的版本意味著要設(shè)計(jì)一個(gè)布局和格式都經(jīng)過修改的單獨(dú)頁(yè)面,這樣才能夠在打印的時(shí)候獲得令人滿意的效果?,F(xiàn)在,通過使用結(jié)構(gòu)化的XHTML和2009-04-02將XHTML CSS頁(yè)面轉(zhuǎn)換為打印機(jī)頁(yè)面
在以前,為Web頁(yè)面創(chuàng)建一個(gè)打印機(jī)友好的版本意味著要設(shè)計(jì)一個(gè)布局和格式都經(jīng)過修改的單獨(dú)頁(yè)面,這樣才能夠在打印的時(shí)候獲得令人滿意的效果?,F(xiàn)在,通過使用結(jié)構(gòu)化的XHT2008-10-17