layui自定义打印

星银色飞行船

已于 2022-07-11 07:49:42 修改

阅读量1w

点赞数 5

分类专栏： layui 文章标签： javascript layui

于 2021-03-29 19:26:31 首次发布

本文链接：https://blog.csdn.net/yinsefeixingchuan/article/details/115308694

版权

layui 专栏收录该内容

14 篇文章 2 订阅

订阅专栏

效果图如下
在这里插入图片描述
自定义内容导出

自定义表格导出

目录
一、自带的打印功能的实现
1. 下载新的layui的js文件
2. 添加toolbar参数
3. 最终打印图标显示
4. 点击打印图标，实现打印效果
5. 隐藏打印功能
二、自定义打印内容的实现
1. html代码
2. js代码
三、自定义打印table的实现
1. html代码
2. js代码

一、自带的打印功能的实现

在layui官网下载新的layui的js文件，有些旧版本的不支持
在table数据赋值时，添加如下参数

toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板

最终会显示出如下图的打印图标
点击打印图标，实现打印table的效果
如果不需要打印功能，可隐藏，实现代码如下

$(".layui-table-tool-self .layui-inline").eq(2).hide();//不需要自带的打印功能

二、自定义打印内容的实现

html代码

<div class="layui-inline">
    <label class="layui-form-label">打印内容</label>
    <div class="layui-input-inline" style="width: 200px">
        <input type="text" name="txtPrint" id="txtPrint" placeholder="请输入打印内容" autocomplete="off" class="layui-input">
    </div>
</div>
<div class="layui-inline">
    <a id="print" class="layui-btn layui-btn-primary layui-btn-sm">
        <i class="layui-icon layui-icon-print"></i>
    </a>
</div>

js代码

//自定义打印内容
$("#print").click(function () {
    var v = document.createElement("div");
    $(v).append($("#txtPrint").val() + "</div>");
    var h = window.open("Print_window", "_blank");
    h.document.write($(v).prop("outerHTML"));
    h.document.close();
    h.print();
    h.close();
})

三、自定义打印table的实现

html代码

<div class="layui-inline">
    <label class="layui-form-label">打印表格</label>
    <table id="table_info">
        <tr>
            <td>7</td>
            <td>8</td>
            <td>9</td>
        </tr>
    </table>
</div>
<div class="layui-inline">
    <a id="printTable" class="layui-btn layui-btn-primary layui-btn-sm">
        <i class="layui-icon layui-icon-print"></i>
    </a>
</div>

js代码

//自定义打印table
$("#printTable").click(function () {
    var v = document.createElement("div");
    var f = ["<head>", "<style>", "body{font-size: 12px; color: #666;}", "table{width: 100%; border-collapse: collapse; border-spacing: 0;}", "th,td{line-height: 20px; padding: 9px 15px; border: 1px solid #ccc; text-align: left; font-size: 12px; color: #666;}", "a{color: #666; text-decoration:none;}", "*.layui-hide{display: none}", ".picture{ }", "</style>", "</head>"].join("");
    $(v).append($("#table_info").html() + "</div>");
    var h = window.open("Print_window", "_blank");
    h.document.write(f + $(v).prop("outerHTML"));
    h.document.close();
    h.print();
    h.close();
})

星银色飞行船

关注

5
点赞
踩
28

收藏

觉得还不错? 一键收藏
打赏
4
评论
layui自定义打印

目录自带的打印功能的实现自定义打印内容的实现自定义打印table的实现一、自带的打印功能的实现在layui官网下载新的layui的js文件，有些旧版本的不支持在table数据赋值时，添加如下参数toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板二、自定义打印内容的实现三、自定义打印table的实现......
复制链接

扫一扫