vue之如何實(shí)現(xiàn)打印功能
更新時(shí)間：2023年11月18日 09:19:47 作者：Cherry?
這篇文章主要介紹了vue之如何實(shí)現(xiàn)打印功能問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
這里用的是 vuePlugs_printjs
- 首先打開(kāi) git項(xiàng)目地址
- 然后將 print.js 下載到本地放入項(xiàng)目文件夾，使用方法如下：
//1.首先在main.js引入
import Print from './utils/print.js'
Vue.use(Print)
//2.在頁(yè)面使用
<div ref=print>打印內(nèi)容<div/>
//3.其次在你用到的地方觸發(fā)這個(gè)方法即可
handleprinter() {
this.$print(this.$refs.print);
}
當(dāng)然也可以參考官方的是使用方法：
vue打印插件 使用方法
import Print from '@/plugs/print' Vue.use(Print) // 注冊(cè) <template> <section ref="print"> 打印內(nèi)容 <div class="no-print">不要打印我</div> </section> </template> this.$print(this.$refs.print) // 使用
注意事項(xiàng)：
需使用ref獲取dom節(jié)點(diǎn)，若直接通過(guò)id或class獲取則webpack打包部署后打印內(nèi)容為空 指定不打印區(qū)域
// 方法一. 添加no-print樣式類
<div class="no-print">不要打印我</div>
// 方法二. 自定義類名
<div class="do-not-print-me-xxx">不要打印我</div>
// 使用
this.$print(this.$refs.print,{'noPrint':'.do-not-print-me-xxx'})
假設(shè)會(huì)出現(xiàn)打印不全的問(wèn)題，可以通過(guò)縮放來(lái)進(jìn)行設(shè)置，數(shù)值越小，縮放的越小。
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
在Vue3項(xiàng)目中使用Jest配置生成測(cè)試報(bào)告的示例詳解
在Vue 3項(xiàng)目中使用Jest進(jìn)行單元測(cè)試是一種常見(jiàn)的做法,它可以幫助我們驗(yàn)證代碼的正確性和穩(wěn)定性,本文將介紹如何在Vue 3項(xiàng)目中配置Jest,以生成測(cè)試報(bào)告,需要的朋友可以參考下2023-09-09
這篇文章主要為大家介紹了tdesign vue初始化組件源碼解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-12-12
這篇文章主要介紹了Vue路由自動(dòng)添加#的問(wèn)題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
今天小編就為大家分享一篇解決vue組件中click事件失效的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-11-11
創(chuàng)建項(xiàng)目及包管理yarn create vite源碼學(xué)習(xí)
這篇文章主要為大家介紹了創(chuàng)建項(xiàng)目及包管理yarn create vite源碼學(xué)習(xí)分析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
vue+flv.js+SpringBoot+websocket實(shí)現(xiàn)視頻監(jiān)控與回放功能
vue+springboot的項(xiàng)目,需要在頁(yè)面展示出?？档挠脖P錄像機(jī)連接的攝像頭的實(shí)時(shí)監(jiān)控畫(huà)面以及回放功能，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2022-02-02
vue如何根據(jù)不同的環(huán)境使用不同的接口地址
這篇文章主要介紹了vue如何根據(jù)不同的環(huán)境使用不同的接口地址問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04
vuejs項(xiàng)目打包之后的首屏加載優(yōu)化及打包之后出現(xiàn)的問(wèn)題
這篇文章主要介紹了vuejs項(xiàng)目打包之后的首屏加載優(yōu)化及打包之后可能出現(xiàn)的問(wèn)題,需要的朋友可以參考下2018-04-04
使用vue-json-viewer實(shí)現(xiàn)JSON數(shù)據(jù)可視化詳解
vue-json-viewer?是一個(gè)用于在?vue.js?應(yīng)用中展示?JSON?數(shù)據(jù)的插件,它提供了一種直觀和美觀的方式來(lái)可視化?JSON?數(shù)據(jù),下面我們來(lái)看看如何使用它進(jìn)行JSON數(shù)據(jù)可視化吧2025-01-01
要學(xué)習(xí)vue-router就要先知道這里的路由是什么？為什么我們不能像原來(lái)一樣直接用標(biāo)簽編寫鏈接哪？vue-router如何使用？常見(jiàn)路由操作有哪些？等等這些問(wèn)題，就是本篇要探討的主要問(wèn)題，感興趣的朋友跟隨腳本之家小編一起學(xué)習(xí)吧2018-05-05