当前位置：首页 > JavaScript

js实现打印图片

2026-03-01 09:47:41JavaScript

使用window.print()方法打印图片

在JavaScript中，可以通过window.print()方法触发浏览器的打印功能。要打印图片，可以将图片放入一个专门用于打印的容器中。

<img id="printImage" src="your-image.jpg" style="display:none;">
<button onclick="printImage()">打印图片</button>

<script>
function printImage() {
  const img = document.getElementById('printImage');
  img.style.display = 'block';

  window.print();

  img.style.display = 'none';
}
</script>

使用CSS控制打印样式

通过CSS的@media print规则可以专门为打印设置样式，确保图片在打印时正确显示。

@media print {
  body * {
    visibility: hidden;
  }
  #printImage, #printImage * {
    visibility: visible;
  }
  #printImage {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
  }
}

创建打印专用iframe

更可靠的方法是在内存中创建一个iframe，将图片放入其中后打印，避免影响主页面。

js实现打印图片

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

  iframe.onload = function() {
    const doc = iframe.contentWindow.document;
    doc.open();
    doc.write('<html><body><img src="' + url + '" style="width:100%;"></body></html>');
    doc.close();

    iframe.contentWindow.focus();
    iframe.contentWindow.print();

    setTimeout(() => {
      document.body.removeChild(iframe);
    }, 1000);
  };

  iframe.src = 'about:blank';
}

处理多图片打印

要打印多张图片，可以将它们放入一个容器中统一处理。

function printImages(imageUrls) {
  const printWindow = window.open('', '_blank');
  printWindow.document.open();

  let html = '<html><body>';
  imageUrls.forEach(url => {
    html += `<img src="${url}" style="display:block; width:100%; margin-bottom:20px;">`;
  });
  html += '</body></html>';

  printWindow.document.write(html);
  printWindow.document.close();

  printWindow.onload = function() {
    printWindow.print();
    printWindow.close();
  };
}

使用canvas打印动态内容

对于需要从canvas导出的图片，可以先将其转换为数据URL再打印。

js实现打印图片

function printCanvas(canvas) {
  const dataUrl = canvas.toDataURL('image/png');
  const printWindow = window.open('', '_blank');

  printWindow.document.write(`
    <html>
      <body>
        <img src="${dataUrl}" style="width:100%;">
      </body>
    </html>
  `);

  printWindow.document.close();
  printWindow.print();
  printWindow.close();
}