layui自定义打印

效果图如下

自定义内容导出

自定义表格导出

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

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

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

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

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

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

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

1. 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>

2. js代码

//自定义打印内容
$("#print").click(function () {
    var v = document.createElement("div");
    $(v).append($("#txtPrint").val() + "

"); var h = window.open("Print_window", "_blank"); h.document.write($(v).prop("outerHTML")); h.document.close(); h.print(); h.close(); })

三、 自定义打印table的实现

1. html代码

<div class="layui-inline">
    <label class="layui-form-label">打印表格label>
    <table id="table_info">
        <tr>
            <td>7td>
            <td>8td>
            <td>9td>
        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>

2. js代码

//自定义打印table
$("#printTable").click(function () {
    var v = document.createElement("div");
    var f = ["", "", ""].join("");
    $(v).append($("#table_info").html() + "

"); var h = window.open("Print_window", "_blank"); h.document.write(f + $(v).prop("outerHTML")); h.document.close(); h.print(); h.close(); })