vue3中使用print-js組件實(shí)現(xiàn)打印操作步驟
更新時(shí)間：2025年02月10日 12:02:02 作者：滕米
文章介紹了在Vue?3中使用print-js組件實(shí)現(xiàn)打印操作的步驟,包括安裝依賴、創(chuàng)建打印組件和處理打印預(yù)覽界面,文章還提到打印預(yù)覽界面的樣式調(diào)整對打印效果的影響,并展示了HTML展示和打印預(yù)覽效果,最后,文章鼓勵(lì)讀者繼續(xù)瀏覽相關(guān)文章并支持腳本之家
第一步：安裝依賴
yarn add print-js
第二步：創(chuàng)建打印組件：PrintHtmlComp.vue
<template>
<div id="printArea_123456789">
<!-- 默認(rèn)插槽，傳入打印內(nèi)容 -->
<slot></slot>
</div>
</template>
<script setup lang="ts">
import printJs from 'print-js';
defineOptions({ name: 'PrintHtmlComp' });
const props = defineProps({
fontSize: {
type: Number,
default: 14,
required: false,
},
});
const handlePrint = () => {
printJs({
printable: 'printArea_123456789', // 打印區(qū)域的id
type: 'html',
scanStyles: true,
targetStyles: ['*'], // 使用dom的所有樣式，很重要
font_size: props.fontSize + 'px', // 字體大小 --很重要，這里字體要和css中字體大小保持一致，默認(rèn)是16px
});
};
defineExpose({ handlePrint });
</script>第三步：處理打印預(yù)覽的界面 PrintPop.vue
這個(gè)界面的的樣式調(diào)整直接關(guān)系到打印的樣式的，即想要打印什么樣的效果就在這個(gè)界面怎么調(diào)試。
<el-dialog v-model="state.dialogVisible" :destroy-on-close="true" :title="state.title" width="780px" @close="close">
<PrintHtmlComp ref="printRef">
<!---這里是想要打印的-->
<div style="font-size: 20px">HELLO WORLD</div>
<div style="font-size: 20px">HELLO WORLD</div>
<div style="font-size: 20px">HELLO WORLD</div>
<div style="font-size: 20px">HELLO WORLD</div>
<div style="font-size: 20px">HELLO WORLD</div>
<div style="font-size: 20px">HELLO WORLD</div>
<div style="font-size: 20px">HELLO WORLD</div>
</PrintHtmlComp>
<template #footer>
<el-button @click="close">取 消</el-button>
<el-button :loading="state.saveLoading" type="primary" @click="handlePrint">打 印</el-button>
</template>
</el-dialog>
<script lang="ts" setup>
import { reactive, ref } from 'vue';
defineOptions({ name: 'WorkApplyPlanPrint' });
const state = reactive({
dialogVisible: false,
});
const showEdit = async () => {
state.dialogVisible = true;
};
const close = () => {
state.dialogVisible = false;
};
// 打印功能的函數(shù)
const handlePrint = async () => {
printRef.value?.handlePrint();
};
defineExpose({ showEdit });
</script>
HTML展示效果
打印預(yù)覽效果：
完成，功德+1。
關(guān)于遇到的問題以及解決方法，后續(xù)更新?。。。?/p>
到此這篇關(guān)于vue3中使用print-js組件實(shí)現(xiàn)打印操作的文章就介紹到這了,更多相關(guān)vue3中使用print-js組件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue純前端實(shí)現(xiàn)將頁面導(dǎo)出為pdf和word文件
這篇文章主要為大家詳細(xì)介紹了vue如何通過純前端實(shí)現(xiàn)將頁面導(dǎo)出為pdf和word文件,文中的示例代碼講解詳細(xì),有需要的小伙伴可以參考一下2024-01-01
這篇文章主要介紹了從源碼角度來回答keep-alive組件的緩存原理，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01
最近遇到這樣的需求輸入連號事件,需要在表格中輸入物流單號,物流號碼,生成的數(shù)量,名稱,點(diǎn)擊確定自動生成固定數(shù)量的連號物流單號,本文重點(diǎn)介紹vue3輸入單號和張數(shù),自動生成連號的單號,感興趣的朋友一起看看吧2024-02-02
這篇文章主要介紹了vue中button標(biāo)簽樣式和功能禁用的寫法，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
Vue3 reactive響應(yīng)式賦值頁面不渲染的解決
這篇文章主要介紹了Vue3 reactive響應(yīng)式賦值頁面不渲染的解決方案，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
如何用electron把vue項(xiàng)目打包為桌面應(yīng)用exe文件
這篇文章主要介紹了如何用electron把vue項(xiàng)目打包為桌面應(yīng)用exe文件，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-05-05
Vue?ElementUI?table實(shí)現(xiàn)雙擊修改編輯某個(gè)內(nèi)容的方法
在實(shí)現(xiàn)表格單元格雙擊編輯功能時(shí),需使用@cell-dblclick事件來觸發(fā)雙擊操作,將單元格切換為input輸入框,通過ref引用和綁定失焦及回車事件來確認(rèn)編輯,同時(shí),需要處理編輯數(shù)據(jù)的更新和方法邏輯的完善2024-09-09
詳解vue中router-link標(biāo)簽所必備了解的屬性
這篇文章主要介紹了vue中router-link標(biāo)簽所必備了解的屬性，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
uniapp-ios開發(fā)之App端與webview端相互通信的方法以及注意事項(xiàng)
在uni-app與Webview之間進(jìn)行數(shù)據(jù)交互是非常常見的需求,下面這篇文章主要給大家介紹了關(guān)于uniapp-ios開發(fā)之App端與webview端相互通信的方法以及注意事項(xiàng)的相關(guān)資料,需要的朋友可以參考下2024-07-07
本文將探討動態(tài)組件加載失敗的常見原因,并提供排查與解決方法,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2025-03-03