html 打印相關(guān)操作與實(shí)現(xiàn)詳解
發(fā)布時(shí)間：2020-02-19 16:27:05 作者：佚名 
我要評論
我要評論這篇文章主要介紹了html 打印相關(guān)操作與實(shí)現(xiàn)詳解，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
原理為調(diào)用 window.print() 方法，但是該方法只能對當(dāng)前頁面全部打印，所以有了以下方案來解決局部打印
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í)的頁頭和頁腳 */
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)前頁面設(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í)才會采用的樣式
- 監(jiān)聽打印事件 window.addEventListener('beforeprint|| afterprint', ()=> {});
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
html2canvas生成清晰的圖片實(shí)現(xiàn)打印的示例代碼
這篇文章主要介紹了html2canvas生成清晰的圖片實(shí)現(xiàn)打印的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著2019-09-30html2 canvas生成清晰的圖片實(shí)現(xiàn)打印功能
html2canvas是一個(gè)非常強(qiáng)大的截圖插件，很多生成圖片和打印的場景會用到它。接下來通過本文給大家介紹html2 canvas生成清晰的圖片實(shí)現(xiàn)打印功能，感興趣的朋友跟隨小編一起2019-09-23- 這篇文章主要介紹了前端實(shí)現(xiàn)打印圖像功能,需要的朋友可以參考下2019-08-27
- 這篇文章主要介紹了一個(gè)不錯(cuò)的html 打印代碼支持翻頁，非常實(shí)用，需要的朋友可以參考下2014-09-17
- 打印屬性 打印 HTML 文檔總是會出現(xiàn)問題。在 CSS2 中，我們可以借助打印屬性讓打印 web 內(nèi)容更容易一些。 屬性 描述 值 orphans 設(shè)置元素放在頁面底部時(shí)所允許的最少文2009-07-13
將XHTML CSS頁面轉(zhuǎn)換為打印機(jī)頁面
在以前，為Web頁面創(chuàng)建一個(gè)打印機(jī)友好的版本意味著要設(shè)計(jì)一個(gè)布局和格式都經(jīng)過修改的單獨(dú)頁面，這樣才能夠在打印的時(shí)候獲得令人滿意的效果?，F(xiàn)在，通過使用結(jié)構(gòu)化的XHTML和2009-04-02將XHTML CSS頁面轉(zhuǎn)換為打印機(jī)頁面
在以前，為Web頁面創(chuàng)建一個(gè)打印機(jī)友好的版本意味著要設(shè)計(jì)一個(gè)布局和格式都經(jīng)過修改的單獨(dú)頁面，這樣才能夠在打印的時(shí)候獲得令人滿意的效果?，F(xiàn)在，通過使用結(jié)構(gòu)化的XHT2008-10-17