当前位置：首页 > JavaScript

js 实现打印

2026-03-02 05:36:30JavaScript

使用 window.print() 方法打印当前页面

在 JavaScript 中，调用 window.print() 方法会直接触发浏览器的打印功能，弹出打印对话框。这是最简单的方式，适用于打印整个页面内容。

function printPage() {
  window.print();
}

打印指定区域内容

如果需要打印页面中的特定部分，可以通过 CSS 隐藏不需要打印的内容，或者将目标内容提取到一个新窗口进行打印。

js 实现打印

function printSpecificElement(elementId) {
  const printContent = document.getElementById(elementId).innerHTML;
  const originalContent = document.body.innerHTML;

  document.body.innerHTML = printContent;
  window.print();
  document.body.innerHTML = originalContent;
}

使用 CSS 控制打印样式

通过 @media print 可以定义打印时的样式，隐藏不需要的元素（如导航栏、按钮等）。

js 实现打印

@media print {
  .no-print {
    display: none;
  }
  body {
    font-size: 12pt;
  }
}

打印外部页面或 PDF

通过 iframe 加载外部内容并打印，适用于打印远程页面或 PDF 文件。

function printExternal(url) {
  const iframe = document.createElement('iframe');
  iframe.style.display = 'none';
  iframe.src = url;
  document.body.appendChild(iframe);

  iframe.onload = () => {
    iframe.contentWindow.print();
    document.body.removeChild(iframe);
  };
}

打印表格或表单数据

动态生成打印内容，适用于表格、表单等结构化数据的打印。

function printTableData(data) {
  const printWindow = window.open('', '_blank');
  printWindow.document.write('<html><head><title>Print Data</title></head><body>');
  printWindow.document.write('<table border="1"><tr><th>Name</th><th>Value</th></tr>');

  data.forEach(item => {
    printWindow.document.write(`<tr><td>${item.name}</td><td>${item.value}</td></tr>`);
  });

  printWindow.document.write('</table></body></html>');
  printWindow.document.close();
  printWindow.print();
}