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

https://blog.csdn.net/Simplify_Webpage/article/details/111663634?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.control&dist_request_id=7939fbd7-f660-4aa2-b162-

monody666

3359人浏览 · 2021-02-25 14:15:27

monody666 · 2021-02-25 14:15:27 发布

来源：https://blog.csdn.net/Simplify_Webpage/article/details/111663634?spm=1001.2014.3001.5501

前端调用浏览器打印功能，实现纯前端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__header,.el-table__body,.el-table__footer{width:100%!important;border-collapse: collapse;text-align:center;}
                table,table tr th, table tr td { border:1px solid #ddd;color:#606266;word-wrap:break-word}
                table tr th,table tr td{padding:4mm 0mm;word-wrap:break-word }
                .el-table__body, tr td .cell{width:100%!important}
                .el-table th.gutter{display: none;}
                .el-table colgroup.gutter{display: none;}
                </style><body>`;
            let content = "";
            // 获取名为传入id的 dom元素内的内容
            let str = document.getElementById(id).innerHTML;
            // 拼接空页面+style样式+dom内容
            content = content + str;
            printStr = printStr + tabStyle + content + "</body></html>";
            // 打开新页面
            let pwin = window.open("_blank");
            // 将内容赋值到新页面
            pwin.document.write(printStr);
            pwin.document.close();
            // 聚焦-不加focuse，在某些情况下，打印页面会有问题。
            pwin.focus();
            // 使用setTimeout，等页面dom元素渲染完成后再打印。
            setTimeout(() => {
                pwin.print(); // 打印功能。 例如 window.print() 直接打印当前整个页面。 
                pwin.close(); // 关闭 打印创建的当前页面
            }, 500);

        }

3.在.vue文件中引入并使用"printExcel"函数

在需要打印的dom元素外面包了一个div，id叫“export”
在这里插入图片描述
// 使用-点击事件触发"printExcel "，传入参数为 id

// 引入函数
import { printExcel } from "@/utils/config";
    printExcel() {
      printExcel("export");
    },

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^