vue頁面使用js實現(xiàn)前端打印功能
更新時間：2024年05月11日 10:03:45 作者：jasmine0178
這篇文章主要介紹了vue頁面使用js實現(xiàn)前端打印功能,文中通過圖文結合的方式給大家講解的非常詳細,對大家實現(xiàn)打印功能有一定的幫助,需要的朋友可以參考下
vue頁面使用js實現(xiàn)前端打印功能
添加打印輸出按鈕
printContent實現(xiàn)打印功能，針對于打印表單時獲取不到頁面數(shù)據(jù)可以使用js原生。遍歷循環(huán)你所要獲取的元素。
針對于打印出來的頁面會出現(xiàn)頁眉和頁腳重新在寫一個style
這樣數(shù)據(jù)就可以渲染上去了，然后頁眉頁腳也沒有了。這里margin的值可以自己隨便更改。如果你覺得再添加一個style麻煩的話，可以在打印頁面的時候取消掉頁眉和頁腳也是一樣的。
最后想要是頁面上的打印按鈕隱藏，使用原生js方法讓它的樣式隱藏就可以了。
這樣就完成啦！
到此這篇關于vue頁面使用js實現(xiàn)前端打印功能的文章就介紹到這了,更多相關vue js前端打印內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要介紹了Vue關于Element UI中的文本域換行問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
Vue數(shù)據(jù)雙向綁定的實現(xiàn)方式講解
Vue數(shù)據(jù)雙向綁定原理：Vue內部通過Object.defineProperty方法屬性攔截的方式，把data對象里每個數(shù)據(jù)的讀寫轉化成getter/setter，當數(shù)據(jù)變化時通知視圖更新2022-08-08
vue3+vite自定義封裝vue組件發(fā)布到npm包的全過程
當市面上主流的組件庫不能滿足我們業(yè)務需求的時候,那么我們就有必要開發(fā)一套屬于自己團隊的組件庫,下面這篇文章主要給大家介紹了關于vue3+vite自定義封裝vue組件發(fā)布到npm包的相關資料,需要的朋友可以參考下2022-09-09
typescript不僅可以約束我們的編碼習慣，還能起到注釋的作用，當我們看到一函數(shù)后我們立馬就能知道這個函數(shù)的用法。這篇文章主要介紹了在Vue組件中使用 TypeScript的方法,需要的朋友可以參考下2018-02-02
淺談在vue中用webpack打包之后運行文件的問題以及相關配置方法
下面小編就為大家分享一篇淺談在vue中用webpack打包之后運行文件的問題以及相關配置方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
15 分鐘掌握vue-next函數(shù)式api(小結)
這篇文章主要介紹了15 分鐘掌握vue-next函數(shù)式api(小結)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-10-10
Vue3中使用vuedraggable拖拽實戰(zhàn)教程
這篇文章主要介紹了Vue3中使用vuedraggable拖拽實戰(zhàn)教程,文中通過示例介紹了vue3拖拽組件vuedraggable的使用demo，需要的朋友可以參考下2023-06-06
關于Vue3路由push跳轉問題(解決Vue2this.$router.push失效）
這篇文章主要介紹了Vue3路由push跳轉問題(解決Vue2this.$router.push失效）,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-07-07
這篇文章主要為大家詳細介紹了Vue+Element實現(xiàn)表格單元格編輯，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
這篇文章主要為大家介紹了用了babel是否還需要polyfill的原理解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-02-02