Lauiui印刷フォームの実装方法

layui フレームワークを使用してフォームを印刷するには、次の手順を順番に実行する必要があります。layui ファイルの導入、印刷ボタンの作成、ボタン イベントのリッスン、フォーム コンテンツの取得、layui の呼び出しです。印刷機能。たとえば、jQuery を使用してフォームのコンテンツを取得し、それを印刷します。$('#form').html() が print({title: 'Form Print', content: content}) に渡されます。

layui 印刷フォームの実装

質問: Lauiui フレームワークを使用してフォームを印刷する方法?

回答:

layui フレームワークを使用してフォームを印刷するには、次の手順が必要です。

ステップ 1 :layui ファイルをインポートします

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

ステップ 2: ボタンを作成します

印刷機能をトリガーするボタンを作成します。

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

ステップ 3: ボタン イベントをリッスンする

layui の on() メソッドを使用して、ボタン クリック イベントをリッスンします。

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

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

ステップ 4: フォームのコンテンツを取得する

リスナー関数で、jQuery またはlayui の html() メソッドを使用して、フォームのコンテンツを取得します。フォームの内容。

たとえば、jQuery を使用する場合:

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

ステップ 5:layui 印刷関数を呼び出す

print() を使用します。フォームの内容を印刷するメソッド。

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

サンプルコード:

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

以上がLauiui印刷フォームの実装方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。