快捷導(dǎo)航

Vue3+TypeScript+printjs實(shí)現(xiàn)標(biāo)簽批量打印功能的完整過程

更新時(shí)間：2024年09月03日 09:50:45 作者：溫問問

最近在做vue項(xiàng)目時(shí)使用到了print-js打印,這里給大家分享下,這篇文章主要給大家介紹了關(guān)于Vue3+TypeScript+printjs實(shí)現(xiàn)標(biāo)簽批量打印功能的完整過程,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下

前言：

臨時(shí)性需求沒怎么接觸過前端，代碼實(shí)現(xiàn)有問題及優(yōu)化點(diǎn)希望大佬可以留言告知一下

開發(fā)工具：VS CODE

界面開發(fā)：Vue3+TypeScript+ElementPlus

打印組件：Print-JS

前端打印入口圖：

標(biāo)簽頁面：

打印界面：

實(shí)現(xiàn)功能：前端點(diǎn)擊"打印標(biāo)簽"彈出打印界面進(jìn)行打印作業(yè)

實(shí)現(xiàn)過程：主界面點(diǎn)擊"打印標(biāo)簽"調(diào)用el-dialog彈窗(預(yù)覽和直接打印都居于彈窗實(shí)現(xiàn))

標(biāo)簽?zāi)０宕a：

<template>
    <div class="LabelPrint-List">
        <el-dialog v-model="state.isShowDialog" draggable :close-on-click-modal="false" width="50%" >
            <template #header>
				<div style="color: #fff">
					<el-icon size="16" style="margin-right: 3px; display: inline; vertical-align: middle"> <ele-Edit/> </el-icon>
					<span>標(biāo)簽打印界面</span>
				</div>
			</template>
            <el-row :gutter="10">
                <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb10">
                     <div v-for="item in state.Datas">
                        <el-card class="box-card" style="width:100mm; height: 90mm;display: block;" >
                            <div :id='item.id?.toString()'>
                                <!-- print-js -->
                                <div class="labelHeadBody">
                                    <div class="labelHeadBodyLeftHead">
                                        <img class="labelHeadBodyLeftHeadimage"  src="/image/點(diǎn)金log.png" fit="fill" />
                                    </div>
                                    <div class="labelHeadBodyRightHead">
                                        <table class="tableHead">
                                            <tr>
                                                <td class="labelHeadBodyRightHeadTd">某某有限公司</td>
                                            </tr>
                                            <tr>
                                                <td class="labelHeadBodyRightHeadTd">物料標(biāo)識(shí)卡</td>
                                            </tr>
                                        </table>
                                    </div>
                                </div>
                                <div class="labelBody">
                                     <table>
                                        <tbody>
                                            <tr><td class="lableBodytdleft">P/N：</td><td class="lableBodytdright">{{ item.produceNo }}</td></tr>
                                            <tr><td class="lableBodytdleft">數(shù)量：</td><td class="lableBodytdright">{{ item.quantity }}</td></tr>
                                            <tr><td class="lableBodytdleft">規(guī)格：</td><td class="lableBodytdright lableBodytdrightfont">{{ item.platingSpecs }}</td></tr>
                                            <tr><td class="lableBodytdleft">供應(yīng)商：</td><td class="lableBodytdright">東莞點(diǎn)金</td></tr>
                                            <tr><td class="lableBodytdleft">生產(chǎn)日期：</td><td class="lableBodytdright">{{moment(String(item.createTime)).format('YYYY/MM/DD')}}</td></tr>
                                            <tr><td class="lableBodytdleft">批次單號(hào)：</td><td class="lableBodytdright">{{ item.lot }}</td></tr>
                                            <tr><td class="lableBodytdleft">單重：</td><td class="lableBodytdright">{{ item.singleWeight }}</td></tr>
                                            <tr><td class="lableBodytdleft">總重：</td><td class="lableBodytdright">{{ item.sumWeight }}</td></tr>
                                            <tr><td class="lableBodytdleft">標(biāo)識(shí)人：</td><td class="lableBodytdright"></td></tr>
                                        </tbody>
                                     </table>
                                </div>
                                
                            </div>
                        </el-card>
                     </div>
                </el-col>
            </el-row>
            <template #footer>
				<span class="dialog-footer">
					<el-button @click="cancel">取 消</el-button>
                    <el-button style="background-color:red;color:white" @click="print">打 印</el-button>
				</span>
			</template> 
        </el-dialog>
    </div>
</template>

Typescript代碼：

printrow 方法中使用nextTick是當(dāng)el-dialog彈窗DOM加載完成后在調(diào)用PrintJS獲取需要打印的區(qū)域，這個(gè)直接打印過程其實(shí)會(huì)先彈窗然后DOM加載完成后直接調(diào)用瀏覽器打印界面，后面把彈出關(guān)閉，如果不加載el-dialog可以通過動(dòng)態(tài)加載html內(nèi)容來實(shí)現(xiàn)直接打印，我這里圖方便就用該方法實(shí)現(xiàn)了。

printJS({printable:區(qū)域id,type:打印類型(pdf\image\html等),style:打印內(nèi)容的CSS樣式})

注意：style參數(shù)值按打印區(qū)域的HTMLCSS樣式構(gòu)建，調(diào)用printJS設(shè)置scanStyles:false不會(huì)自動(dòng)加載HTML的CSS樣式需要重新給Style參數(shù)賦值所以增加了一個(gè)printStyle函數(shù)，scanStyles默認(rèn)值是true(會(huì)導(dǎo)致打印界面的內(nèi)容奇奇怪怪，還沒去了解詳細(xì)原因哈哈哈哈)

<script lang="ts" setup>
import { ref,reactive,nextTick } from 'vue';
import { TbProduceOrderNoInfo } from '/@/api-services';
import printJS from 'print-js';
import moment from 'moment';
const props=defineProps({
    title:String
})

const state=reactive({
    isShowDialog:false,
    Datas:[] as Array<TbProduceOrderNoInfo>,
})

const emits = defineEmits(['handleQuery']);
const closeDialog=()=>{
    emits('handleQuery');
    state.isShowDialog=false;
}

const cancel=()=>{
    state.isShowDialog=false;
    closeDialog();
}

//預(yù)覽+打印
const openDialog=async(row:any)=>{
   
   state.Datas=JSON.parse(JSON.stringify(row));

   state.isShowDialog=true;
}

const print=()=>{
   for(var i=0;i<state.Datas.length;i++){
      printJS({printable:`${state.Datas[i].id}`,type:"html",style:printStyle(),scanStyles:false})
   }
}

//直接打印不預(yù)覽
const printrow=async(row:any)=>{
    state.Datas=JSON.parse(JSON.stringify(row));
    state.isShowDialog=true;
    //主界面form DOM加載完成
    nextTick(()=>{
            //彈窗加載完成
            nextTick(()=>{
                printJS({printable:`${state.Datas[0].id}`,type:"html",style:printStyle(),scanStyles:false})
                state.isShowDialog=false;
            })
        })
}

//打印界面的CSS樣式
const printStyle=()=>{
    return `
.labelHeadBody{
    display: flex;justify-content:space-between;margin: 0; font-size: 16px;width: 100%; height:45px
}
.labelHeadBodyLeftHead{
    width: 30px;
}
.labelHeadBodyRightHead{
    width: 250px; height: 70px;display: flex;justify-content: center;
}
.lableBodytdrightfont{
    font-size:10px
}
.labelHeadBodyRightHeadTd{
    padding: 0;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    vertical-align: middle;
}
.labelBody{
    margin-left: 5px;
    margin-right: 5px;
}
.lableBodytdleft{
    width: 30%;
    font-weight: bold;
    vertical-align: bottom;
   
}

.lableBodytdright{
    width: 70%; 
    border-bottom: 1px solid;
}
.labelHeadBodyLeftHeadimage{
    width: 70px; height: 40px
}
.tableHead{
    height: 20px;
}
    `;
}



//預(yù)覽、直接打印
defineExpose({openDialog,printrow})
</script>

標(biāo)簽前端樣式代碼：

<style>
.labelHeadBody{
    display: flex;justify-content:space-between;margin: 0; font-size: 16px;width: 100%;
}
.labelHeadBodyLeftHead{
    width: 30px;
}
.labelHeadBodyRightHead{
    width: 250px; height: 70px;display: flex;justify-content: center;
}

.labelHeadBodyRightHeadTd{
    padding: 0;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    vertical-align: middle;
}
.labelBody{
    margin-top: 10px;
    margin-left: 5px;
    margin-right: 5px;
}
.lableBodytdleft{
    width: 30%;
    font-weight: bold;
    vertical-align: bottom;
   
}
.lableBodytdright{
    width: 75%; 
    border-bottom: 1px solid;
}
.labelHeadBodyLeftHeadimage{
    width: 80px; height: 55px
}
.tableHead{
    height: 20px;
}
</style>

最后，如果需要帶二維碼的同學(xué)可以添加qrcode組件，以下是簡(jiǎn)單的實(shí)現(xiàn)（el-image、img標(biāo)簽中圖片不顯示的問題還沒解決，迂回操作直接把生成的二維碼圖片設(shè)置成控件背景來處理，囧.........）：

<template #default="scope">
                         <div :style="createQrcode(scope.row.eqNo)" ></div>
                          <!-- <el-image :scr="createQrcode1(scope.row.eqNo)" style="width: 60px;height: 60px;"></el-image> -->
</template>


import QRCode from 'qrcode'

//將生成的二維碼設(shè)置成div的Style，不知道為嘛el-image綁定base64image圖片不顯示
const createQrcode=(text:string)=>{
    if(text==""||text==undefined||text==null) return "";
    let url1:any;
    url1="";  
    QRCode.toDataURL(text,(err,url)=>{
        if(err){
            console.error(err);
        }
        else{
            url1=url;
        }
    })
    return `background-image: url(${url1});background-position: center center;background-size: contain;background-repeat: no-repeat;;width:100%;height:60px`;
}

總結(jié)

到此這篇關(guān)于Vue3+TypeScript+printjs實(shí)現(xiàn)標(biāo)簽批量打印功能的文章就介紹到這了,更多相關(guān)Vue3+TypeScript+printjs標(biāo)簽批量打印內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: