React MDX博客中如何为myCard组件添加指定图片单独打印功能

实现逻辑核心 #

用临时隐藏iframe承载要打印的单张图片，触发iframe的打印能力，不会污染当前页面样式，也不会跳转页面。

步骤1：封装通用打印工具函数 #

新建utils.js文件，写入以下代码：

export const printImage = (imgUrl) => {
  // 创建隐藏的iframe容器
  const iframe = document.createElement('iframe')
  Object.assign(iframe.style, {
    position: 'absolute',
    width: 0,
    height: 0,
    border: 'none',
    visibility: 'hidden'
  })
  document.body.appendChild(iframe)

  const iframeDoc = iframe.contentWindow.document
  // 写入打印内容和样式
  iframeDoc.write(`
    <html>
      <head>
        <style>
          * { margin: 0; padding: 0; }
          img { width: 100%; height: auto; display: block; }
          @media print {
            @page { size: auto; margin: 10mm; }
          }
        </style>
      </head>
      <body>
        <img src="${imgUrl}" onload="window.print()" />
      </body>
    </html>
  `)
  iframeDoc.close()

  // 打印完成后自动移除iframe
  iframe.contentWindow.onafterprint = () => {
    document.body.removeChild(iframe)
  }
}

步骤2：MDX中调用函数实现打印按钮 #

在你的MDX文件中导入工具函数，直接添加按钮绑定对应图片地址即可：

import { printImage } from './utils'

<ImageGrid>
  <myCard title="first image" url="https://test.test" image="https://img1.link" />
  <myCard title="second img " url="https://test.test" image="https://img2.link" />
  <myCard title="3rd img" url="https://test.test" image="https://img2.link" />
</ImageGrid>

{/* 打印按钮组 */}
<div style={{ margin: '20px 0', display: 'flex', gap: '12px' }}>
  <button onClick={() => printImage('https://img1.link')}>打印第一张图片</button>
  <button onClick={() => printImage('https://img2.link')}>打印第二张图片</button>
</div>

可选优化：给myCard组件内置打印按钮 #

如果需要每个卡片自带打印功能，直接修改myCard组件代码即可，不需要在外层单独写按钮：

import { printImage } from './utils'

const myCard = ({ title, url, image }) => {
  return (
    <div className="my-card">
      <img src={image} alt={title} />
      <h3>{title}</h3>
      <a href={url} target="_blank" rel="noopener noreferrer">查看原图</a>
      <button onClick={() => printImage(image)} className="print-btn">打印本图</button>
    </div>
  )
}

注意事项 #

• 跨域图片需要图片服务配置了CORS规则，否则会出现加载失败无法打印的问题
• 可以按需修改iframe内的@page样式，调整打印的边距、纸张方向等参数
• React MDX默认支持内联事件绑定，不需要额外配置编译规则

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