正文

轻松掌握JS表单打印技巧，快速实现网页表单内容打印功能

/0 浏览量
0529

在网页开发中，有时候我们需要将用户填写的表单内容打印出来，这通常涉及到JavaScript和CSS的配合使用。下面，我将详细介绍如何使用JavaScript实现网页表单内容的打印功能。

一、理解打印需求

在开始编写代码之前，我们需要明确打印的需求。一般来说，打印表单内容可能包括以下几方面：

  1. 打印表单的标题和内容。
  2. 打印用户填写的所有字段信息。
  3. 保持打印内容的格式和布局与网页上一致。

二、HTML结构

首先，我们需要创建一个基本的表单HTML结构。以下是一个简单的表单示例：

<form id="myForm">
  <h2>个人信息表单</h2>
  <label for="name">姓名：</label>
  <input type="text" id="name" name="name"><br>
  <label for="email">邮箱：</label>
  <input type="email" id="email" name="email"><br>
  <label for="phone">电话：</label>
  <input type="tel" id="phone" name="phone"><br>
  <button type="button" onclick="printForm()">打印</button>
</form>

三、CSS样式

为了确保打印内容的格式和布局与网页上一致，我们需要对打印的表单进行一些CSS样式设置。以下是一个简单的CSS样式示例：

@media print {
  body {
    margin: 0;
    padding: 0;
  }
  #myForm {
    width: 80%;
    margin: 20px auto;
  }
  h2 {
    text-align: center;
  }
  label, input {
    display: block;
    margin-bottom: 10px;
  }
  input {
    width: 100%;
  }
}

四、JavaScript实现

接下来，我们需要编写JavaScript代码来实现打印功能。以下是一个简单的JavaScript函数，用于打印表单内容：

function printForm() {
  // 获取表单元素
  var form = document.getElementById('myForm');
  
  // 创建一个新的打印窗口
  var printWindow = window.open('', '_blank');
  
  // 设置打印窗口的文档内容
  printWindow.document.write('<!DOCTYPE html>');
  printWindow.document.write('<html lang="zh-CN">');
  printWindow.document.write('<head>');
  printWindow.document.write('<meta charset="UTF-8">');
  printWindow.document.write('<meta name="viewport" content="width=device-width, initial-scale=1.0">');
  printWindow.document.write('<title>表单打印</title>');
  printWindow.document.write('<style>');
  printWindow.document.write('@media print {');
  printWindow.document.write('  body {');
  printWindow.document.write('    margin: 0;');
  printWindow.document.write('    padding: 0;');
  printWindow.document.write('  }');
  printWindow.document.write('  #myForm {');
  printWindow.document.write('    width: 80%;');
  printWindow.document.write('    margin: 20px auto;');
  printWindow.document.write('  }');
  printWindow.document.write('  h2 {');
  printWindow.document.write('    text-align: center;');
  printWindow.document.write('  }');
  printWindow.document.write('  label, input {');
  printWindow.document.write('    display: block;');
  printWindow.document.write('    margin-bottom: 10px;');
  printWindow.document.write('  }');
  printWindow.document.write('  input {');
  printWindow.document.write('    width: 100%;');
  printWindow.document.write('  }');
  printWindow.document.write('}');
  printWindow.document.write('</style>');
  printWindow.document.write('</head>');
  printWindow.document.write('<body>');
  printWindow.document.write(form.innerHTML);
  printWindow.document.write('</body>');
  printWindow.document.write('</html>');
  
  // 打开打印窗口
  printWindow.document.close();
  printWindow.focus();
  
  // 打印内容
  printWindow.print();
  
  // 关闭打印窗口
  setTimeout(function() {
    printWindow.close();
  }, 5000);
}

五、总结

通过以上步骤，我们成功实现了网页表单内容的打印功能。在实际应用中，您可以根据自己的需求对代码进行修改和优化。希望这篇文章对您有所帮助！

-- 展开阅读全文 --