js实现打印

使用window.print()方法实现打印

在JavaScript中，可以通过调用window.print()方法直接触发浏览器的打印功能。这会打开系统的打印对话框，用户可以选择打印机和设置打印选项。

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

打印特定区域内容

如果只需要打印页面中的某一部分内容，可以先获取该区域的HTML，然后替换整个文档内容进行打印。

function printDiv(divId) {
  const printContents = document.getElementById(divId).innerHTML;
  const originalContents = document.body.innerHTML;

  document.body.innerHTML = printContents;
  window.print();
  document.body.innerHTML = originalContents;
}

使用CSS控制打印样式

通过CSS的@media print规则可以专门为打印设置样式，隐藏不需要打印的元素或调整布局。

@media print {
  .no-print {
    display: none;
  }

  body {
    font-size: 12pt;
  }
}

打印前和打印后事件

JavaScript提供了beforeprint和afterprint事件，可以在打印前后执行特定操作。

window.addEventListener('beforeprint', () => {
  console.log('准备打印');
});

window.addEventListener('afterprint', () => {
  console.log('打印完成');
});

使用打印样式表

可以创建一个专门用于打印的样式表，在打印时应用这些样式。

<link rel="stylesheet" href="print.css" media="print">

打印PDF文件

如果需要打印PDF文件，可以使用PDF.js库或浏览器内置的PDF查看器功能。

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

  iframe.onload = function() {
    iframe.contentWindow.print();
  };
}

打印图像

打印图像时，可以创建一个包含图像的临时页面进行打印。

function printImage(imageUrl) {
  const printWindow = window.open('', '_blank');
  printWindow.document.write(`<img src="${imageUrl}" style="max-width:100%;">`);
  printWindow.document.close();
  printWindow.focus();
  printWindow.print();
}

注意事项

打印功能在不同浏览器中可能有差异，某些浏览器可能会阻止弹出窗口的打印功能。移动设备上的打印支持也有限。测试时应在多种浏览器和设备上进行验证。

打印样式应考虑纸张尺寸和边距，使用@page规则可以设置页面大小和边距。

@page {
  size: A4;
  margin: 1cm;
}