React组件实现信纸尺寸全比例打印与下载方案咨询

一、解决html-to-image导出尺寸过小的问题 #

html-to-image的导出方法自带scale参数，直接放大导出倍率就能提升分辨率，完全不用修改原组件的尺寸。比如你原组件是340px×440px，给scale设为3，导出的PNG分辨率就会变成1020px×1320px，足够满足打印清晰度需求。

导出PNG示例代码 #

import { toPng } from 'html-to-image';

const exportAsPng = async () => {
  const element = document.getElementById('letter-component');
  if (!element) return;

  // scale值越高导出分辨率越大，可根据实际需求调整
  const dataUrl = await toPng(element, {
    scale: 3,
    quality: 1.0
  });

  // 创建下载链接并触发下载
  const link = document.createElement('a');
  link.download = 'letter-document.png';
  link.href = dataUrl;
  link.click();
};

如果要导出SVG（矢量图无失真），可以直接修改导出后的SVG尺寸，匹配95%的信纸比例（8.5×0.95=8.075英寸，11×0.95=10.45英寸），同时保留原组件的比例：

导出SVG示例代码 #

import { toSvg } from 'html-to-image';

const exportAsSvg = async () => {
  const element = document.getElementById('letter-component');
  if (!element) return;

  const svgString = await toSvg(element);
  const parser = new DOMParser();
  const svgDoc = parser.parseFromString(svgString, 'image/svg+xml');
  const svgElement = svgDoc.querySelector('svg');
  
  if (svgElement) {
    // 设置viewBox锁定原比例，再指定实际尺寸为95%信纸大小（按1英寸=96px换算）
    const originalWidth = 340;
    const originalHeight = 440;
    svgElement.setAttribute('viewBox', `0 0 ${originalWidth} ${originalHeight}`);
    svgElement.setAttribute('width', `${8.075 * 96}px`);
    svgElement.setAttribute('height', `${10.45 * 96}px`);
    svgElement.setAttribute('preserveAspectRatio', 'xMidYMid meet');
  }

  // 生成SVG下载链接
  const blob = new Blob([svgDoc.documentElement.outerHTML], { type: 'image/svg+xml' });
  const url = URL.createObjectURL(blob);
  const link = document.createElement('a');
  link.download = 'letter-document.svg';
  link.href = url;
  link.click();
  URL.revokeObjectURL(url);
};

二、优化打印样式，避免边缘裁切 #

用CSS媒体查询针对打印场景设置专属样式，把组件缩放95%，同时隐藏页面其他无关元素，指定打印纸张为标准信纸尺寸：

@media print {
  /* 隐藏页面其他所有内容 */
  body * {
    visibility: hidden;
  }
  /* 仅显示目标信纸组件 */
  #letter-component, #letter-component * {
    visibility: visible;
  }
  /* 居中组件并缩放95%，避免打印边缘裁切 */
  #letter-component {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.95);
    width: 8.5in;
    height: 11in;
    margin: 0;
    border: none; /* 打印时去掉组件边框 */
  }
  /* 取消浏览器默认页面边距，指定纸张尺寸为信纸 */
  @page {
    margin: 0;
    size: letter;
  }
}

打印功能直接调用浏览器原生的window.print()即可：

const printComponent = () => {
  window.print();
};

三、完整组件示例 #

把上面的代码整合到React组件中，直接就能使用：

import React from 'react';
import { toPng, toSvg } from 'html-to-image';

const LetterComponent = () => {
  const exportAsPng = async () => {
    const element = document.getElementById('letter-component');
    if (!element) return;

    const dataUrl = await toPng(element, {
      scale: 3,
      quality: 1.0
    });

    const link = document.createElement('a');
    link.download = 'letter-document.png';
    link.href = dataUrl;
    link.click();
  };

  const exportAsSvg = async () => {
    const element = document.getElementById('letter-component');
    if (!element) return;

    const svgString = await toSvg(element);
    const parser = new DOMParser();
    const svgDoc = parser.parseFromString(svgString, 'image/svg+xml');
    const svgElement = svgDoc.querySelector('svg');
    
    if (svgElement) {
      const originalWidth = 340;
      const originalHeight = 440;
      svgElement.setAttribute('viewBox', `0 0 ${originalWidth} ${originalHeight}`);
      svgElement.setAttribute('width', `${8.075 * 96}px`);
      svgElement.setAttribute('height', `${10.45 * 96}px`);
      svgElement.setAttribute('preserveAspectRatio', 'xMidYMid meet');
    }

    const blob = new Blob([svgDoc.documentElement.outerHTML], { type: 'image/svg+xml' });
    const url = URL.createObjectURL(blob);
    const link = document.createElement('a');
    link.download = 'letter-document.svg';
    link.href = url;
    link.click();
    URL.revokeObjectURL(url);
  };

  const printComponent = () => {
    window.print();
  };

  return (
    <div>
      <div id="letter-component" style={{
        width: '340px',
        height: '440px',
        backgroundColor: '#fff',
        border: '1px solid #ccc',
        padding: '20px',
        boxSizing: 'border-box'
      }}>
        <h1>信纸内容</h1>
        <p>这是匹配8.5:11比例的组件内容</p>
      </div>
      <div style={{ marginTop: '20px' }}>
        <button onClick={printComponent} style={{ marginRight: '10px' }}>打印文档</button>
        <button onClick={exportAsPng} style={{ marginRight: '10px' }}>导出PNG</button>
        <button onClick={exportAsSvg}>导出SVG</button>
      </div>
      <style jsx global>{`
        @media print {
          body * {
            visibility: hidden;
          }
          #letter-component, #letter-component * {
            visibility: visible;
          }
          #letter-component {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) scale(0.95);
            width: 8.5in;
            height: 11in;
            margin: 0;
            border: none;
          }
          @page {
            margin: 0;
            size: letter;
          }
        }
      `}</style>
    </div>
  );
};

export default LetterComponent;

内容的提问来源于stack exchange，提问作者JustANoob