DOM Element → Canvas/PNG/SVG

import { snapdom } from '@zumer/snapdom';

// 獲取 DOM 元素
const element = document.querySelector('.my-element');

// 截圖
const capture = await snapdom(element, {
  scale: 2,      // 2倍清晰度
  quality: 0.95  // PNG 質(zhì)量
});

// 輸出方式
const canvas = await capture.toCanvas();  // Canvas 元素
const imgEl = await capture.toPng();      // <img> 元素，src 為 data URL
const svgStr = await capture.toSvg();     // SVG 字符串

import { jsPDF } from 'jspdf';

// 創(chuàng)建 PDF 實(shí)例
const pdf = new jsPDF({
  orientation: 'portrait',  // 縱向
  unit: 'mm',               // 單位：毫米
  format: 'a4',             // A4 紙張
  compress: true            // 啟用壓縮
});

// 添加圖片
pdf.addImage(
  imageDataUrl,  // Base64 圖片數(shù)據(jù)
  'PNG',         // 圖片格式
  10,            // X 坐標(biāo)（mm）
  10,            // Y 坐標(biāo)（mm）
  190,           // 寬度（mm）
  100            // 高度（mm）
);

// 添加新頁面
pdf.addPage();

// 保存文件
pdf.save('output.pdf');

// A4 標(biāo)準(zhǔn)尺寸（單位：mm）
const A4_WIDTH_MM = 210;
const A4_HEIGHT_MM = 297;

// 頁面邊距
const MARGIN_MM = 10;

// 可用內(nèi)容區(qū)域
const CONTENT_WIDTH_MM = 190;   // 210 - 10*2
const CONTENT_HEIGHT_MM = 277;  // 297 - 10*2

src/
├── components/
│   ├── MessageList.tsx      # 消息列表組件
│   └── MessageList.css      # 消息列表樣式
├── services/
│   └── messageExportService.ts  # PDF 導(dǎo)出服務(wù)（核心）
└── App.tsx

// messageExportService.ts

import { snapdom } from '@zumer/snapdom';

// 圖片質(zhì)量配置
const IMAGE_QUALITY = 0.95;
const IMAGE_FORMAT = 'image/png' as const;

/**
 * 將 DOM 元素轉(zhuǎn)換為圖片
 */
export async function captureElementToImage(
  element: HTMLElement,
  quality: number = IMAGE_QUALITY
): Promise<string> {
  console.log('開始截圖...');

  // 保存原始樣式
  const originalOverflow = element.style.overflow;
  const originalHeight = element.style.height;
  const originalMaxHeight = element.style.maxHeight;

  // 臨時(shí)設(shè)置樣式，確保完整截圖
  element.style.overflow = 'visible';
  element.style.height = 'auto';
  element.style.maxHeight = 'none';

  try {
    // 核心：使用 snapdom 進(jìn)行截圖
    const capture = await snapdom(element, {
      scale: 2,        // 2倍清晰度
      quality: quality
    });

    // 優(yōu)先使用 toPng()
    const imgElement = await capture.toPng();
    const dataUrl = imgElement.src;

    // 驗(yàn)證數(shù)據(jù)有效性
    if (!dataUrl || dataUrl.length < 100) {
      console.log('toPng 返回?zé)o效，嘗試 toCanvas...');
      const canvas = await capture.toCanvas();
      return canvas.toDataURL(IMAGE_FORMAT, quality);
    }

    console.log('截圖成功，大小:', (dataUrl.length / 1024).toFixed(2), 'KB');
    return dataUrl;

  } finally {
    // 恢復(fù)原始樣式
    element.style.overflow = originalOverflow;
    element.style.height = originalHeight;
    element.style.maxHeight = originalMaxHeight;
  }
}

// 尺寸常量
const A4_WIDTH_MM = 210;
const A4_HEIGHT_MM = 297;
const PDF_MARGIN_MM = 10;
const PDF_CONTENT_WIDTH_MM = A4_WIDTH_MM - PDF_MARGIN_MM * 2;   // 190mm
const PDF_CONTENT_HEIGHT_MM = A4_HEIGHT_MM - PDF_MARGIN_MM * 2; // 277mm

// 1mm = 3.7795275590551 像素（96 DPI）
const MM_TO_PX = 3.7795275590551;

// 分頁后的圖片數(shù)據(jù)
interface PageImageData {
  dataUrl: string;
  width: number;
  height: number;
}

/**
 * 將長圖片分割成多個(gè) A4 頁面
 */
export async function splitImageIntoPages(
  imageDataUrl: string
): Promise<PageImageData[]> {

  return new Promise((resolve, reject) => {
    const img = new Image();
    img.crossOrigin = 'anonymous';

    img.onload = () => {
      const pages: PageImageData[] = [];
      const originalWidth = img.width;
      const originalHeight = img.height;

      // 將 A4 內(nèi)容區(qū)域轉(zhuǎn)換為像素（考慮 scale=2）
      const pageContentHeightPx = Math.floor(
        PDF_CONTENT_HEIGHT_MM * MM_TO_PX * 2  // scale=2
      );
      const pageContentWidthPx = Math.floor(
        PDF_CONTENT_WIDTH_MM * MM_TO_PX * 2
      );

      // 計(jì)算縮放比例（圖片寬度適配頁面寬度）
      const widthScale = pageContentWidthPx / originalWidth;
      const scaledHeight = originalHeight * widthScale;

      // 計(jì)算總頁數(shù)
      const totalPages = Math.ceil(scaledHeight / pageContentHeightPx);

      console.log(`原始尺寸: ${originalWidth}x${originalHeight}px`);
      console.log(`縮放后高度: ${scaledHeight}px, 總頁數(shù): ${totalPages}`);

      // 逐頁裁剪
      for (let pageIndex = 0; pageIndex < totalPages; pageIndex++) {
        const startY = pageIndex * pageContentHeightPx;
        const endY = Math.min(startY + pageContentHeightPx, scaledHeight);
        const currentPageHeight = Math.floor(endY - startY);

        // 計(jì)算源圖片對應(yīng)的區(qū)域
        const sourceStartY = startY / widthScale;
        const sourceHeight = currentPageHeight / widthScale;

        // 創(chuàng)建新 Canvas
        const canvas = document.createElement('canvas');
        const ctx = canvas.getContext('2d')!;

        canvas.width = pageContentWidthPx;
        canvas.height = currentPageHeight;

        // 高質(zhì)量渲染
        ctx.imageSmoothingEnabled = true;
        ctx.imageSmoothingQuality = 'high';

        // 繪制當(dāng)前頁內(nèi)容
        ctx.drawImage(
          img,
          0, sourceStartY,           // 源圖片起始位置
          originalWidth, sourceHeight, // 源圖片尺寸
          0, 0,                        // 目標(biāo)起始位置
          pageContentWidthPx, currentPageHeight // 目標(biāo)尺寸
        );

        // 轉(zhuǎn)換為 data URL
        const pageDataUrl = canvas.toDataURL(IMAGE_FORMAT, IMAGE_QUALITY);

        pages.push({
          dataUrl: pageDataUrl,
          width: pageContentWidthPx,
          height: currentPageHeight
        });

        console.log(`第 ${pageIndex + 1}/${totalPages} 頁處理完成`);
      }

      resolve(pages);
    };

    img.onerror = () => reject(new Error('圖片加載失敗'));
    img.src = imageDataUrl;
  });
}

原始長圖 (假設(shè) 5000px 高)
┌───────────────────┐
│                   │ ─┐
│      Page 1       │  │ 1046px (277mm × 3.78 × 2)
│                   │ ─┘
├───────────────────┤
│                   │ ─┐
│      Page 2       │  │ 1046px
│                   │ ─┘
├───────────────────┤
│                   │ ─┐
│      Page 3       │  │ 1046px
│                   │ ─┘
├───────────────────┤
│                   │ ─┐
│      Page 4       │  │ 1046px
│                   │ ─┘
├───────────────────┤
│      Page 5       │ ── 剩余 816px
│                   │
└───────────────────┘

import { jsPDF } from 'jspdf';

/**
 * 從分頁圖片創(chuàng)建 PDF
 */
export function createPdfFromPages(pages: PageImageData[]): jsPDF {
  const pdf = new jsPDF({
    orientation: 'portrait',
    unit: 'mm',
    format: 'a4',
    compress: true  // 啟用壓縮，減小文件體積
  });

  if (pages.length === 0) {
    throw new Error('沒有可添加的頁面');
  }

  pages.forEach((page, index) => {
    // 第一頁直接用，后續(xù)需要 addPage
    if (index > 0) {
      pdf.addPage();
    }

    // 像素轉(zhuǎn)毫米（考慮 scale=2）
    const scaleFactor = 2;
    const pageHeightMm = page.height / MM_TO_PX / scaleFactor;

    // 圖片適配內(nèi)容區(qū)域?qū)挾?
    const finalWidth = PDF_CONTENT_WIDTH_MM;  // 190mm
    const finalHeight = pageHeightMm;

    // 位置：左上角對齊，保留 10mm 邊距
    const x = PDF_MARGIN_MM;
    const y = PDF_MARGIN_MM;

    console.log(`添加第 ${index + 1} 頁: ${finalWidth}x${finalHeight.toFixed(2)}mm`);

    // 添加圖片到 PDF
    pdf.addImage(page.dataUrl, 'PNG', x, y, finalWidth, finalHeight);
  });

  return pdf;
}

interface ExportConfig {
  targetSelector: string;   // CSS 選擇器
  filename?: string;        // 文件名
  quality?: number;         // 圖片質(zhì)量
}

/**
 * 主導(dǎo)出函數(shù)
 */
export async function exportMessagesToPdf(config: ExportConfig): Promise<void> {
  const {
    targetSelector,
    filename = 'messages.pdf',
    quality = IMAGE_QUALITY
  } = config;

  console.log('=== 開始導(dǎo)出 PDF ===');

  // 1. 獲取目標(biāo)元素
  const element = document.querySelector(targetSelector) as HTMLElement;
  if (!element) {
    throw new Error(`元素未找到: ${targetSelector}`);
  }

  console.log('元素尺寸:', {
    width: element.offsetWidth,
    height: element.scrollHeight
  });

  // 2. DOM 截圖
  const imageDataUrl = await captureElementToImage(element, quality);
  console.log('截圖完成，大小:', (imageDataUrl.length / 1024).toFixed(2), 'KB');

  // 3. 圖片分頁
  const pages = await splitImageIntoPages(imageDataUrl);
  console.log(`分頁完成，共 ${pages.length} 頁`);

  // 4. 創(chuàng)建 PDF
  const pdf = createPdfFromPages(pages);

  // 5. 保存文件
  pdf.save(filename);
  console.log('=== 導(dǎo)出完成 ===');
}

// MessageList.tsx

import { exportMessagesToPdf } from '../services/messageExportService';

const MessageList: React.FC = () => {
  const messageListRef = useRef<HTMLDivElement>(null);
  const [isExporting, setIsExporting] = useState(false);

  const handleExportToPdf = useCallback(async () => {
    setIsExporting(true);

    try {
      // 生成帶時(shí)間戳的文件名
      const timestamp = new Date().toISOString().replace(/[:.]/g, '-');
      const filename = `messages-${timestamp}.pdf`;

      await exportMessagesToPdf({
        targetSelector: '.message-list-container',
        filename,
        quality: 0.95
      });

    } catch (error) {
      console.error('導(dǎo)出失敗:', error);
      alert('導(dǎo)出失敗，請重試');
    } finally {
      setIsExporting(false);
    }
  }, []);

  return (
    <div className="message-list-container" ref={messageListRef}>
      <div className="message-list-header">
        <h2>消息記錄</h2>
        <button
          className="export-button"
          onClick={handleExportToPdf}
          disabled={isExporting}
        >
          {isExporting ? '導(dǎo)出中...' : '導(dǎo)出 PDF'}
        </button>
      </div>

      <div className="message-list">
        {messages.map(message => (
          <MessageItem key={message.id} message={message} />
        ))}
      </div>
    </div>
  );
};

=== 開始導(dǎo)出 PDF ===
目標(biāo)選擇器: .message-list-container
元素尺寸: { width: 600, height: 8500 }
開始截圖...
截圖完成，大小: 2847.65 KB
分頁完成，共 8 頁
添加第 1 頁: 190x277.00mm
添加第 2 頁: 190x277.00mm
...
添加第 8 頁: 190x156.32mm
=== 導(dǎo)出完成 ===

import html2canvas from 'html2canvas';

// 需要處理各種兼容性問題
const canvas = await html2canvas(element, {
  scale: 2,
  useCORS: true,
  logging: false,
  allowTaint: true,
  foreignObjectRendering: true,  // 可能不生效
  // 還需要處理字體、SVG 等問題...
});

const dataUrl = canvas.toDataURL('image/png');

import { snapdom } from '@zumer/snapdom';

// 簡潔的 API，無需額外配置
const capture = await snapdom(element, {
  scale: 2,
  quality: 0.95
});

const dataUrl = (await capture.toPng()).src;