vue中使用vue-print.js實(shí)現(xiàn)多頁(yè)打印
本文主要介紹了vue項(xiàng)目中使用print.js打印，解決多頁(yè)，分頁(yè)，打印預(yù)覽樣式修改等問(wèn)題。
引入安裝vue-print.js
cnpm i vue-printjs --save-dev
解決打印多頁(yè)只出現(xiàn)一頁(yè)問(wèn)題
由于打印插件存在問(wèn)題，如果打印文件超出一頁(yè)，只顯示一頁(yè)，所以我們需要修改print.js源文件，所以只能手動(dòng)下載vue-print.js到本地，做一些修改，然后引入到項(xiàng)目中，不能使用npm安裝
下載 print.js
https://github.com/zxc19890923/print/blob/master/print.js
在src目錄下面創(chuàng)建plugins/print/Print.js文件保存插件內(nèi)容
修改 print.js
// 搜索getStyle方法，添加：str += "<style>html,body,div{height: auto!important;font-size:14px}</style>";
getStyle: function () {
var str = "",
styles = document.querySelectorAll('style,link');
for (var i = 0; i < styles.length; i++) {
str += styles[i].outerHTML;
}
str += "<style>" + (this.options.noPrint ? this.options.noPrint : '.no-print') + "{display:none;}</style>";
str += "<style>html,body,div{height: auto!important;font-size:14px}</style>";
return str;
},
main.js中引入插件
... import Print from './plugins/print/Print' Vue.use(Print)
vue文件中的使用
<div class="show">
這是展示的需要打印的內(nèi)容，給用戶看的。
</div>
<div ref="print" class="recordImg" id="print">
這里是需要打印的內(nèi)容，出現(xiàn)在打印預(yù)覽的界面，這里的樣式需要寫(xiě)在 @media print {}里面 如果需要設(shè)置預(yù)覽頁(yè)規(guī)則，頁(yè)腳等樣式 @page {}
<div class="no-print">不需要打印的內(nèi)容</div>
<div class="do-not-print-div">不要打印我</div>
<button @click="printContext">打印</button>
</div>
...
<script>
...
method: {
printContext () {
this.$print(this.$refs.print)
}
// 不打印方法1. 添加no-print樣式類
// 不打印方法2. this.$print(this.$refs.print,{'no-print':'.do-not-print-div'})
}
</script>
最后
1、為了打印全部，手動(dòng)下載插件并修改。
2、打印內(nèi)容樣式需要寫(xiě)在 @media print {}中
3、this.$print(),不需要打印內(nèi)容可以通過(guò)css，js兩種方法控制。
到此這篇關(guān)于vue中使用vue-print.js實(shí)現(xiàn)多頁(yè)打印的文章就介紹到這了,更多相關(guān)vue print.js 多頁(yè)打印內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了vue中使用/deep/失效的解決辦法,使用了css預(yù)處理器，則可以使用/deep/， 如果/deep/ 無(wú)效，則使用 ::v-deep，本文給大家講解的非常詳細(xì)需要的朋友可以參考下2022-11-11
ElementUI對(duì)table的指定列進(jìn)行合算
本文主要介紹了ElementUI對(duì)table的指定列進(jìn)行合算，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-03-03
vue構(gòu)建單頁(yè)面應(yīng)用實(shí)戰(zhàn)
本篇文章主要介紹了vue構(gòu)建單頁(yè)面應(yīng)用實(shí)戰(zhàn)，使用 SPA，沒(méi)有頁(yè)面切換，就沒(méi)有白屏阻塞，可以大大提高 H5 的性能，達(dá)到接近原生的流暢體驗(yàn)。2017-04-04
vue3成功創(chuàng)建項(xiàng)目后?run?serve啟動(dòng)項(xiàng)目報(bào)錯(cuò)的解決
這篇文章主要介紹了vue3成功創(chuàng)建項(xiàng)目后?run?serve啟動(dòng)項(xiàng)目報(bào)錯(cuò)的解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
Vue實(shí)現(xiàn)回到頂部和底部動(dòng)畫(huà)效果
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)回到頂部和底部動(dòng)畫(huà)效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-07-07
Vue?Router?實(shí)現(xiàn)登錄后跳轉(zhuǎn)到之前想要訪問(wèn)的頁(yè)面
這篇文章主要介紹了Vue?Router?實(shí)現(xiàn)登錄后跳轉(zhuǎn)到之前相要訪問(wèn)的頁(yè)面,本文僅演示路由跳轉(zhuǎn)和導(dǎo)航守衛(wèi)相關(guān)代碼的實(shí)現(xiàn)，不包含具體的權(quán)限驗(yàn)證和登錄請(qǐng)求，需要的朋友可以參考下2022-12-12
vue中el-checkbox、el-switch綁定值問(wèn)題詳解
這篇文章主要給大家介紹了關(guān)于vue中el-checkbox、el-switch綁定值問(wèn)題的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用vue具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2024-01-01
用Vue.js方法創(chuàng)建模板并使用多個(gè)模板合成
在本篇文章中小編給大家分享了關(guān)于如何使用Vue.js方法創(chuàng)建模板并使用多個(gè)模板合成的相關(guān)知識(shí)點(diǎn)內(nèi)容，需要的朋友們學(xué)習(xí)下。2019-06-06
vue+el-select?多數(shù)據(jù)分頁(yè)搜索組件的實(shí)現(xiàn)
本文主要介紹了vue+el-select?多數(shù)據(jù)分頁(yè)搜索組件的實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2024-12-12
vue3輸入無(wú)效路由跳轉(zhuǎn)到指定error頁(yè)面問(wèn)題
這篇文章主要介紹了vue3輸入無(wú)效路由跳轉(zhuǎn)到指定error頁(yè)面問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03