vue+element-ui+js页面打印（打印elementui的table）

最新推荐文章于 2024-08-22 16:00:34 发布

一只特立独行的小猪崽

最新推荐文章于 2024-08-22 16:00:34 发布

阅读量5.3k

点赞数 3

分类专栏： vue js element-ui 文章标签： vue javascript jquery

本文链接：https://blog.csdn.net/Simplify_Webpage/article/details/111663634

版权

本文介绍了如何在Vue项目中结合Element-UI实现页面表格的打印功能，包括效果展示、封装公共打印函数到utils/config.js，并在.vue文件中通过点击事件调用printExcel函数，实现指定id元素的打印，支持自动分页。

摘要由CSDN通过智能技术生成

前端调用浏览器打印功能，实现纯前端vue+element-ui+js打印页面功能

1.效果展示

打开新页面，打印表格，可以自动分页
在这里插入图片描述

2.封装成公共函数

可以根据自己的需要，选择是否封装成公共函数。
我是放在utils下的config.js文件里面。

//id 是你要打印的某个dom元素的id名
        export function printExcel(id) {
   
            // 空页面
            let printStr = "<html><head><meta http-equiv='Content-Type' content='text/html; charset=utf-8'></head>";
            // 定义element-ui table组件的样式
            const tabStyle = `<style>
                table{width:100%;display:table-cell!important;box-sizing:border-box;}
                .el-table__head