Vue使用Print.js打印div方式(選中區(qū)域的html)
更新時間：2024年03月11日 10:11:43 作者：藍(lán)胖子的多啦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等，詳細(xì)寫法見官網(wǎng)
targetStyles: ['*'], //css樣式，寫成*代表打印樣式完全繼承你頁面的樣式
maxWidth:'800px' //打印界面最大寬度，適當(dāng)調(diào)整可以解決打印頁面過寬，顯示不完整的問題
})
},
}
展示效果
tips
printHtml打印默認(rèn)顯示當(dāng)前日期和url怎么去掉
普通表單的打印平臺提供的printHtml,用的是瀏覽器的打印
在打印的時候頁面上可能會在頭部顯示當(dāng)前日期，在底部顯示url，這個瀏覽器打印的頁眉頁腳控制的
可以設(shè)置不要頁眉頁腳或者設(shè)置頁眉頁腳為空
iE的頁眉頁腳設(shè)置在菜單欄——文件——頁面設(shè)置中
chrome的在打印的時候提供的有打印設(shè)置
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue axios全局?jǐn)r截 get請求、post請求、配置請求的實例代碼
這篇文章主要介紹了Vue axios全局?jǐn)r截 get請求、post請求、配置請求的實例代碼,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2018-11-11
vue+webpack實現(xiàn)異步加載三種用法示例詳解
這篇文章主要介紹了vue+webpack實現(xiàn)異步加載的三種用法，文中給大家提到了vue+webpack實現(xiàn)異步組件加載的代碼，非常不錯，具有參考借鑒價值，需要的朋友參考下吧2018-04-04
詳解用vue.js和laravel實現(xiàn)微信授權(quán)登陸
本篇文章主要介紹了詳解用vue.js和laravel實現(xiàn)微信授權(quán)登陸，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-06-06
這篇文章主要為大家介紹了Pinia介紹及工作原理解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-03-03
這篇文章主要介紹了vue實現(xiàn)一個懶加載的樹狀表格實例，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-05-05
Vue中的Object.defineProperty全面理解
這篇文章主要介紹了Vue中的Object.defineProperty全面理解，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
Vue3父子組件傳參有關(guān)sync修飾符的用法詳解
這篇文章主要給大家介紹關(guān)于前端Vue3父子組件傳參有關(guān)sync修飾符的用法詳細(xì)解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助2021-09-09
這篇文章主要介紹了vue結(jié)合AntV?G2的使用踩坑記錄，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了關(guān)于element中表格和表單的封裝方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-07-07
Vue+Node實現(xiàn)商品列表的分頁、排序、篩選，添加購物車功能詳解
這篇文章主要介紹了Vue+Node實現(xiàn)商品列表的分頁、排序、篩選，添加購物車功能,結(jié)合實例形式分析了vue.js前臺商品分頁、排序、篩選等功能及后臺node.js處理技巧,需要的朋友可以參考下2019-12-12