当前位置：首页 > JavaScript

js实现打印图片

2026-04-04 10:29:41JavaScript

使用Canvas实现图片打印

通过Canvas将图片绘制到画布上，再通过浏览器打印功能输出

function printImage(imageUrl) {
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');
  const img = new Image();

  img.crossOrigin = 'Anonymous';
  img.onload = function() {
    canvas.width = img.width;
    canvas.height = img.height;
    ctx.drawImage(img, 0, 0);

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

使用CSS媒体查询控制打印样式

通过CSS设置打印时的页面样式，隐藏不必要元素

function printImageWithCSS(imageUrl) {
  const printContent = `
    <style>
      @media print {
        body * { visibility: hidden; }
        .print-container, .print-container * { visibility: visible; }
        .print-container { position: absolute; left: 0; top: 0; }
      }
    </style>
    <div class="print-container">
      <img src="${imageUrl}" style="max-width:100%">
    </div>
  `;

  const printWindow = window.open('', '_blank');
  printWindow.document.write(printContent);
  printWindow.document.close();
  printWindow.focus();
  printWindow.print();
}

使用iframe实现静默打印

创建隐藏iframe加载图片后进行打印

js实现打印图片

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

  iframe.onload = function() {
    const content = `
      <img src="${imageUrl}" onload="window.print()" style="max-width:100%">
    `;
    iframe.contentDocument.write(content);
    iframe.contentDocument.close();
  };

  iframe.src = 'about:blank';
}

处理跨域图片打印

当图片存在跨域限制时的解决方案

function printCrossOriginImage(imageUrl) {
  fetch(imageUrl)
    .then(response => response.blob())
    .then(blob => {
      const reader = new FileReader();
      reader.onload = function() {
        const printWindow = window.open('', '_blank');
        printWindow.document.write(`<img src="${reader.result}">`);
        printWindow.document.close();
        printWindow.focus();
        printWindow.print();
      };
      reader.readAsDataURL(blob);
    })
    .catch(error => console.error('Error:', error));
}

多图片打印控制

批量打印多张图片的实现方法

js实现打印图片

function printMultipleImages(imageUrls) {
  const printWindow = window.open('', '_blank');
  let html = '<style>img { margin: 10px; max-width: 90%; }</style>';

  imageUrls.forEach(url => {
    html += `<img src="${url}">`;
  });

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

  // 添加延时确保图片加载完成
  setTimeout(() => {
    printWindow.print();
  }, 500);
}