Vue3+TypeScript+Element表格打印功能

1、下载依赖 

npm install vue3-print-nb --save

2、在main.ts中引用 "vue3-print-nb"   

import print from "vue3-print-nb";

3、编写一个公用的表格打印组件 Prints.vue

<template>

    <el-dialog v-model="addVisible" :title="titles+'打印预览'" width="60%" :before-close="handleClose" top="2vh">

        <div>

            <el-table :data="tableData" id="myTable1Prints" style="width: 100%" size="small" border>

                <el-table-column :prop="item.code" :label="item.name" :width="item.width" v-for="(item,index) in headers" :key="index" />

            </el-table>

        </div>

        <template #footer>

            <span class="dialog-footer">

                <el-button type="primary" size="small" v-print="printObj"> 确定打印 </el-button>

                <el-button  size="small" @click="close">取消</el-button>

            </span>

        </template>

    </el-dialog>

</template>



<script lang="ts" setup>

import { ref, reactive, defineProps, computed, defineEmits, onMounted, watch, toRaw } from 'vue'

import type { FormInstance, FormRules } from 'element-plus'

import { ElMessage } from 'element-plus'



const props = defineProps({

    addVisible: Boolean,

    info: Array

})

const titles=ref()

const printObj = ref(

    {

        id: "myTable1Prints",

        popTitle: "",

        extraCss: "https://cdn.bootcdn.net/ajax/libs/animate.css/4.1.1/animate.compat.css, https://cdn.bootcdn.net/ajax/libs/hover.css/2.3.1/css/hover-min.css",

        extraHead: '<meta http-equiv="Content-Language"content="zh-cn"/>',

        previewBeforeOpenCallback () {

            console.log('正在加载预览窗口')

        },

        previewOpenCallback () {

          console.log('已经加载完预览窗口')

        },

        beforeOpenCallback (vue:any) {

        //   vue.printLoading = true

          console.log('打开之前')

        },

        openCallback (vue:any) {

        //   vue.printLoading = false

          console.log('执行了打印')

        },

        closeCallback () {

          console.log('关闭了打印工具')

        },

        clickMounted (vue:any) {

          console.log('点击了打印按钮')

          emits("Closeprint")

          // vue.printSet.popTitle = vue.tableHead // 动态设置页眉

        }

    }

)

const tableData = ref<any>([])

const backData=ref()

const headers=ref<any>([])

//监听

watch(

    () => props.info,

    (newInfo, oldInfo) => {

        // console.log(newInfo)

        if (newInfo != undefined) {

            backData.value=JSON.parse(newInfo as any)

            tableData.value=backData.value.data

            titles.value=backData.value.title

            printObj.value.popTitle=backData.value.title

            headers.value=backData.value.header

        } else {

           

        }

    }

);

//defineEmits用于定义回调事件，里面是数组，可以定义多个事件

const emits = defineEmits(["Closeprint"])

const handleClose = (done: () => void) => {

    emits("Closeprint")

}



onMounted(() => {



})



const close = () => {

    emits("Closeprint")

}




</script>

<style lang="scss" scoped>



</style>

4、使用打印功能页面引用组件

<PrintsVue :addVisible="printVisible" :info="printinfo" @Closeprint="Closeprint"></PrintsVue>

import PrintsVue from './components/Prints.vue'

5、使用打印组件

const printVisible=ref(false)

const printinfo=ref()

const Closeprint = () =>{

    printVisible.value=false

}

const downloads = async (type:string) =>{

        //定义一个需要打印的数据变量

         let newArr=ref<any>([])

        //将表格中勾选的每行数据重新拼接成需要的数据格式

        let arr: any[] = multipleTableRef.value?.getSelectionRows()

        arr.forEach((element:any,key:any) => {

            newArr.value.push({

                index:key + 1,

                name:element.name,

            })

        });

    let dataObj={

        title:"打印标题",

        data:newArr.value,

        header:[//表格表头数据

            {name:'序号',code:'index',width:50},

            {name:'名称',code:'name'},

        ]

    }

    printinfo.value=JSON.stringify(dataObj)

    printVisible.value=true

}