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了頁面
