2024年Web前端最全Vue3+TypeScript+Element表格打印功能_vue3打印表格(2)，技术详细介绍

学习分享，共勉

题外话，毕竟我工作多年，深知技术改革和创新的方向，Flutter作为跨平台开发技术、Flutter以其美观、快速、高效、开放等优势迅速俘获人心

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

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 {

           

        }

    }



### 总结

根据路线图上的重点去进行有针对性的学习，在学习过程中，学会写笔记，做总结。

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**

这里分享一些前端学习笔记：

* **html5 / css3 学习笔记**  

  ![](https://img-blog.csdnimg.cn/img_convert/c7aea89db6b059151c753196f8f4e9b5.png)

  

* **JavaScript 学习笔记**  

  ![](https://img-blog.csdnimg.cn/img_convert/af0c75f32f6618baccf39ce440a0fb5c.png)

* **Vue 学习笔记**  

  ![](https://img-blog.csdnimg.cn/img_convert/94cca01f6717f672208838e9ac549be1.png)



*  

  ![](https://img-blog.csdnimg.cn/img_convert/af0c75f32f6618baccf39ce440a0fb5c.png)

* **Vue 学习笔记**  

  ![](https://img-blog.csdnimg.cn/img_convert/94cca01f6717f672208838e9ac549be1.png)