日常開發(fā)中，導(dǎo)出帶滾動(dòng)條的DOM內(nèi)容為圖片時(shí)，普通截圖只能抓可視區(qū)域？本文分享基于@snapdom的長(zhǎng)截圖方案，完美導(dǎo)出完整內(nèi)容，還能精準(zhǔn)復(fù)刻UI～

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

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

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

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

二、核心原理

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

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

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

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

實(shí)現(xiàn)步驟

1. DOM 結(jié)構(gòu)隔離：

   • 將需要導(dǎo)出的內(nèi)容（圖表列表 + 截圖歷史）包裹在一個(gè)獨(dú)立的 <div> 中，并綁定 contentRef。

2. 執(zhí)行截圖：

   • 點(diǎn)擊導(dǎo)出按鈕時(shí)，調(diào)用 snapdom.toCanvas(contentRef.current)。
   • 庫會(huì)自動(dòng)計(jì)算節(jié)點(diǎn)的完整尺寸（包括溢出/滾動(dòng)部分）進(jìn)行繪制。

3. 下載文件：

   • 將生成的 Canvas 轉(zhuǎn)換為 Data URL。
   • 動(dòng)態(tài)創(chuàng)建一個(gè) <a> 標(biāo)簽，設(shè)置 download 屬性和 href，觸發(fā)點(diǎn)擊事件下載圖片。

關(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)出報(bào)告為圖片
  const handleExportReport = async () => {
    if (!reportContentRef.current) {
      message.error('無法獲取報(bào)告內(nèi)容');
      return;
    }
    try {
      setExportLoading(true);
      // 使用 @zumer/snapdom 組件實(shí)現(xiàn) html轉(zhuǎn)canvas
      const contentCanvas = await snapdom.toCanvas(reportContentRef.current, {
        // 配置選項(xiàng)
        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}評(píng)估報(bào)告.jpg`;
      link.href = dataUrl;
      link.click();
      link.remove();

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

優(yōu)勢(shì)

• 所見即所得（甚至更多） ：能夠?qū)С霭瑵L動(dòng)區(qū)域在內(nèi)的所有內(nèi)容。
• 純凈輸出：通過 Ref 精確鎖定內(nèi)容區(qū)域，自動(dòng)過濾掉按鈕和無關(guān) UI。
• 速度很快：比傳統(tǒng)手動(dòng) Canvas 繪制快 30%+，點(diǎn)擊導(dǎo)出即刻觸發(fā)下載，用戶體驗(yàn)流暢。

如果要求導(dǎo)出的UI和頁面上的不一致，可以新建一個(gè)專門用來導(dǎo)出的組件，隱藏在頁面上的某個(gè)地方。

總結(jié)

到此這篇關(guān)于前端實(shí)現(xiàn)帶滾動(dòng)區(qū)域的DOM長(zhǎng)截圖導(dǎo)出的文章就介紹到這了,更多相關(guān)前端滾動(dòng)區(qū)域DOM長(zhǎng)截圖導(dǎo)出內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論