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