在线体验

作用：可以直接预览 html 的页面效果，导出为图片，支持指定切割的数量，等高水平切割。

https://houbb.github.io/tools/html-preview.html

创作背景

有时候希望给一段 html 导出为长度，或者水平切分，感觉人工比较麻烦，就想着实现一个。

核心代码

导出的核心代码

  [js]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
async function exportAsImage() {
  const sliceCount = Math.min(9, Math.max(1, parseInt(document.getElementById('sliceCount').value) || 1));
  
  const iframe = document.getElementById('preview-frame');
  const doc = iframe.contentDocument || iframe.contentWindow.document;
  
  const totalHeight = doc.documentElement.scrollHeight;
  const sliceHeight = Math.ceil(totalHeight / sliceCount);

  for(let i=0; i<sliceCount; i++) {
    await html2canvas(doc.documentElement, {
      useCORS: true,
      scrollY: i * sliceHeight,
      windowHeight: sliceHeight,
      height: sliceHeight,
      y: i * sliceHeight
    }).then(canvas => {
      const link = document.createElement('a');
      link.download = `slice_${i+1}.png`;
      link.href = canvas.toDataURL();
      link.click();
    });
  }
}

参考资料

https://houbb.github.io/2025/02/05/tools-html-image-export-and-split