快捷導(dǎo)航

前端實現(xiàn)帶滾動區(qū)域的DOM長截圖導(dǎo)出完整步驟

更新時間：2026年02月11日 09:40:32 作者：小小鬧鐘

前端實現(xiàn)截圖功能有多種方式,開發(fā)中實現(xiàn)截圖也是常見的功能需求,這篇文章主要介紹了前端實現(xiàn)帶滾動區(qū)域的DOM長截圖導(dǎo)出的相關(guān)資料,文中給出了詳細(xì)的代碼示例,需要的朋友可以參考下

一、業(yè)務(wù)痛點（為什么選snapdom？）

開發(fā)中經(jīng)常遇到「導(dǎo)出帶滾動區(qū)域的DOM為圖片」的需求（比如評估報告、圖表列表、長表單），普通方案的問題：

? 僅能截取可視區(qū)域，滾動隱藏的內(nèi)容丟失；
? Canvas繪制易出現(xiàn)樣式錯亂（字體、顏色、布局偏差）；
? 手動計算滾動高度復(fù)雜，適配成本高。

? 解決方案：使用第三方庫@zumer/snapdom，直接將DOM節(jié)點完整渲染為Canvas，完美解決以上問題。

二、核心原理

使用第三方庫snapdom 核心是模擬瀏覽器渲染引擎，將指定DOM節(jié)點（包括子節(jié)點、滾動隱藏區(qū)域）完整轉(zhuǎn)換為Canvas，從而生成長截圖：

解析DOM節(jié)點的完整布局（包括overflow滾動區(qū)域的實際高度）；
復(fù)刻節(jié)點的所有樣式（CSS、字體、圖片、背景色）；
按真實尺寸渲染為Canvas，支持高分辨率導(dǎo)出；
最終將Canvas轉(zhuǎn)換為圖片并下載。

解決的關(guān)鍵問題

完整內(nèi)容導(dǎo)出：內(nèi)容較多時會出現(xiàn)滾動條，普通的截圖方式只能截取可視區(qū)域。snapdom 可以渲染整個 DOM 節(jié)點的高度。

實現(xiàn)步驟

DOM 結(jié)構(gòu)隔離：
- 將需要導(dǎo)出的內(nèi)容（圖表列表 + 截圖歷史）包裹在一個獨立的 <div> 中，并綁定 contentRef。
執(zhí)行截圖：
- 點擊導(dǎo)出按鈕時，調(diào)用 snapdom.toCanvas(contentRef.current)。
- 庫會自動計算節(jié)點的完整尺寸（包括溢出/滾動部分）進行繪制。
下載文件：
- 將生成的 Canvas 轉(zhuǎn)換為 Data URL。
- 動態(tài)創(chuàng)建一個 <a> 標(biāo)簽，設(shè)置 download 屬性和 href，觸發(fā)點擊事件下載圖片。

關(guān)鍵代碼

結(jié)構(gòu)：

{/* 導(dǎo)出目標(biāo)容器（ref={contentRef}） */}
 <div ref={reportContentRef} className="export-container">
      <ReportHeader reportData={reportData} />
      <FirstTab reportData={reportData} isExport={isExport} />
      <SecondTab reportData={reportData} mapUrl={mapUrl} isExport={isExport} />
      <ThirdTab reportData={reportData} isExport={isExport} />
      <ReportFooter />
    </div>

導(dǎo)出邏輯：

 // 導(dǎo)出報告為圖片
  const handleExportReport = async () => {
    if (!reportContentRef.current) {
      message.error('無法獲取報告內(nèi)容');
      return;
    }
    try {
      setExportLoading(true);
      // 使用 @zumer/snapdom 組件實現(xiàn) html轉(zhuǎn)canvas
      const contentCanvas = await snapdom.toCanvas(reportContentRef.current, {
        // 配置選項
        dpr: 3,
        scale: 2,
        backgroundColor: '#e7f0fa',
      });

      // 轉(zhuǎn)換為圖片數(shù)據(jù)URL
      const dataUrl = contentCanvas.toDataURL('image/png');

      // 下載截圖
      const link = document.createElement('a');
      link.download = `${reportData?.createTime}${reportData?.stationName}評估報告.jpg`;
      link.href = dataUrl;
      link.click();
      link.remove();

      message.success('報告導(dǎo)出成功');
      setExportLoading(false);
    } catch (error) {
      message.error('報告導(dǎo)出失敗，請重試');
      setExportLoading(false);
    }
  };