Vue使用Print.js打印div方式(選中區(qū)域的html)
更新時間：2024年03月11日 10:11:43 作者：藍胖子的多啦A夢
這篇文章主要介紹了Vue使用Print.js打印div方式(選中區(qū)域的html),具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
一、下載 Print.js 插件
npm install print-js --save
二、導(dǎo)入 Print.js 插件
import print from 'print-js'
三、在頁面上使用
<div id="printJS-form">
需要打印的區(qū)域
</div>
<button type="button" @click="printJS('printJS-form', 'html')">
打印按鈕
</button>
methods: {
//打印
printDetail(){
printJS({
printable:'printJS-form', //打印區(qū)域
type:'html', //打印類型html，還可以是json，image等，詳細寫法見官網(wǎng)
targetStyles: ['*'], //css樣式，寫成*代表打印樣式完全繼承你頁面的樣式
maxWidth:'800px' //打印界面最大寬度，適當調(diào)整可以解決打印頁面過寬，顯示不完整的問題
})
},
}
展示效果
tips
printHtml打印默認顯示當前日期和url怎么去掉
普通表單的打印平臺提供的printHtml,用的是瀏覽器的打印
在打印的時候頁面上可能會在頭部顯示當前日期，在底部顯示url，這個瀏覽器打印的頁眉頁腳控制的
可以設(shè)置不要頁眉頁腳或者設(shè)置頁眉頁腳為空
iE的頁眉頁腳設(shè)置在菜單欄——文件——頁面設(shè)置中
chrome的在打印的時候提供的有打印設(shè)置
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了Vue混入與插件的使用，mixins（混入），官方的描述是一種分發(fā) Vue 組件中可復(fù)用功能的非常靈活的方式，mixins是一個js對象，它可以包含我們組件中script項中的任意功能選項，如data、components、methods 、created、computed等等2022-09-09
這篇文章主要介紹了Vue3計算屬性是如何實現(xiàn)的，對于任何包含響應(yīng)式數(shù)據(jù)的復(fù)雜邏輯，我們都應(yīng)該使用計算屬性，更多相關(guān)內(nèi)容需要的小伙伴可以參考一下2022-08-08
這篇文章主要介紹了vue3.0 自適應(yīng)不同分辨率電腦的操作,本文給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-02-02
這篇文章主要介紹了VUE項目去除input 框值所有空格的操作方法，主要包括去除空格的方法、正則和element ui寫法，本文給大家講解的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-10-10
這篇文章主要介紹了vue-cli3.0 特性解讀,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-04-04
這篇文章主要為大家詳細介紹了Vue中使用vux配置的相關(guān)資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-05-05
這篇文章主要為大家詳細介紹了vue獲取驗證碼倒計時組件，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-08-08
vue?elementui?實現(xiàn)圖片上傳后拖拽排序功能示例代碼
這篇文章主要介紹了vue?elementui?實現(xiàn)圖片上傳后拖拽排序功能,本文通過示例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-01-01
這里提供一個Vue單點登錄的demo給大家參考，對Vue實現(xiàn)單點登錄控件的完整代碼感興趣的朋友跟隨小編一起看看吧2021-11-11
解決vue單頁路由跳轉(zhuǎn)后scrollTop的問題
今天小編就為大家分享一篇解決vue單頁路由跳轉(zhuǎn)后scrollTop的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09