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