How to implement layui printing form

To use the layui framework to print a form, you need to perform the following steps in sequence: introduce the layui file, create a print button, listen to button events, obtain the form content, and call the layui print function. For example, use jQuery to get the form content and print it: $('#form').html() passed to print({title: 'Form Print', content: content}).

Implementation of layui printing form

Question: How to use the layui framework to print a form?

Answer:

To use the layui framework to print a form, the following steps are required:

Step 1: Import the layui file

<script src="layui/layui.js"></script>

Step 2: Create a button

Create a button to trigger the print function.

<button id="printBtn">打印表单</button>

Step 3: Listen to button events

Use layui’s on() method to listen to button click events.

layui.use(['layer', 'print'], function () {
  var layer = layui.layer;
  var print = layui.print;

  layui.on('click', '#printBtn', function () {
    // ...
  });
});

Step 4: Get the form content

In the listener function, use the html() method of jQuery or layui to get the form content.

For example, using jQuery:

var content = $('#form').html();

Step 5: Call the layui print function

Use the print() method to print the form content.

print({
  title: '表单打印', // 打印标题
  content: content, // 打印内容
});

Sample code:

  <script src="layui/layui.js"></script>


  

    
    
  

  <button id="printBtn">打印表单</button>

  <script>
    layui.use(['layer', 'print'], function () {
      var layer = layui.layer;
      var print = layui.print;

      layui.on('click', '#printBtn', function () {
        var content = $('#form').html();

        print({
          title: '表单打印',
          content: content
        });
      });
    });
  </script>

The above is the detailed content of How to implement layui printing form. For more information, please follow other related articles on the PHP Chinese website!