1代承、網(wǎng)上方法
1妒潭、
先將頁面上不需要打印的部分display設(shè)為none,只留下需要打印的部分,然后打印完再將display設(shè)置回來,缺點是對于根元素display有的為flex有的為block的不太適用漠酿,需要reload頁面
2赫粥、
取出需要打印部分的html,將html頁面的body替換掉胃夏,然后打印完替換回來轴或,缺點是如果頁面復(fù)雜且css是一層一層寫的就容易在打印的時候丟失樣式
3、
自定義一個vue組件仰禀,里面放一個iframe照雁,然后把需要打印的部分綁定到這個iframe中,缺點是組件編寫繁瑣答恶,獲取css樣式也很麻煩
2饺蚊、個人實現(xiàn)
因為頁面不復(fù)雜,所以選擇了第二種方法
綁定ref
給需要打印的部分最外層套一個大的div悬嗓,然后綁定ref
doPrint() {
// 設(shè)置要打印區(qū)域
const printArea = this.$refs.print.innerHTML
//console.log(printArea)
// 存儲原區(qū)域
// const oldArea = window.document.body.innerHTML
// 復(fù)制給body污呼,并執(zhí)行window.print打印功能
document.body.innerHTML = printArea
window.print()
// 還原原區(qū)域
location.reload()
}
CSS樣式
通過$refs獲取節(jié)點,并且獲取節(jié)點內(nèi)容包竹,復(fù)制給頁面body燕酷,window.print()調(diào)用完之后將原來的復(fù)制回來,但是發(fā)現(xiàn)復(fù)制回來之后再次點擊打印不生效了映企。悟狱。。暫時沒找到原因堰氓,因此reload了頁面