如何仅用 JavaScript 截取桌面端网页的完整页面？

2026-11-04数据小许

在只用手机、只运行网页中的原生 JavaScript，且不使用外部库或在线工具的条件下，没有通用、可靠的方法直接生成桌面端布局的整页截图。

如果只是为 landing page 准备一张展示图，使用浏览器自带的整页截图功能更直接，但需要相应的浏览器环境。手机能否完成，取决于手机系统和浏览器的截图能力。

为什么原生 JavaScript 难以完成

这个需求分为两步：先让页面按桌面端布局渲染，再截取完整页面，包括屏幕外的内容。

普通网页脚本没有通用的标准 API，能直接将任意 DOM 及其样式、字体、图片和屏幕外内容导出为截图。canvas 可以绘制图像等支持的来源，但不能直接把 document.body 当作网页截图来源。

原生的 navigator.mediaDevices.getDisplayMedia() 可以请求捕获用户选择的屏幕、窗口或标签页，返回 MediaStream。调用它需要安全上下文、用户操作和明确授权，也不会自动完成滚动拼接。MDN：getDisplayMedia()

手机浏览器中的“桌面版网站”选项也不保证页面与真实桌面浏览器完全一致，需要检查实际布局。

能使用电脑时：直接使用浏览器整页截图

如果之后可以使用电脑，一次截图不必专门编写 JavaScript：

在桌面 Chrome 中打开项目页面。
打开 DevTools，再打开 Device Toolbar。
设置需要的视口宽度；需要时显示 Device Type 选项并选择 Desktop。
等待页面内容、图片和字体加载完成。
在 Device Toolbar 的更多选项中选择 Capture a full size screenshot。

该功能会截取页面，包括当前视口外的内容，不需要安装截图库或使用在线截图服务。Chrome DevTools：视口设置与截图

如果页面有懒加载内容，截图前先滚动浏览页面。无限滚动列表需要先确定截取范围；虚拟列表中尚未渲染的项目，也不能假定会自动出现在截图里。

可选：用原生 JavaScript 截取授权画面

如果可以接受截取用户选择的画面，而不是完整长页面，可以在支持 getDisplayMedia() 的浏览器中使用下面的示例。它不依赖外部库，但不能解决手机上的桌面端整页截图需求。

将代码放在通过 HTTPS 提供的页面中，点击按钮后选择捕获来源：

<button id="capture" type="button">截取授权画面</button>
<p id="status" role="status"></p>

<script>
  const button = document.querySelector('#capture');
  const status = document.querySelector('#status');

  button.addEventListener('click', async () => {
    if (!navigator.mediaDevices?.getDisplayMedia) {
      status.textContent = '当前环境不支持屏幕捕获。';
      return;
    }

    let stream;
    const video = document.createElement('video');
    button.disabled = true;

    try {
      stream = await navigator.mediaDevices.getDisplayMedia({
        video: true,
        audio: false
      });

      video.muted = true;
      video.playsInline = true;
      video.srcObject = stream;
      await video.play();

      if (!video.videoWidth || !video.videoHeight) {
        throw new Error('尚未获得可用的视频画面。');
      }

      const canvas = document.createElement('canvas');
      canvas.width = video.videoWidth;
      canvas.height = video.videoHeight;

      const context = canvas.getContext('2d');
      if (!context) {
        throw new Error('无法创建 Canvas 绘图上下文。');
      }
      context.drawImage(video, 0, 0);

      const link = document.createElement('a');
      link.href = canvas.toDataURL('image/png');
      link.download = 'capture.png';
      document.body.append(link);
      link.click();
      link.remove();
      status.textContent = '已生成截图。';
    } catch (error) {
      status.textContent = `未能完成截图：${error.message}`;
    } finally {
      stream?.getTracks().forEach(track => track.stop());
      video.srcObject = null;
      button.disabled = false;
    }
  });
</script>

截图尺寸来自捕获的视频画面。把 canvas.height 改成 document.documentElement.scrollHeight，只会改变画布大小，不会补出页面下方尚未捕获的内容。

目前只有手机时怎么处理

可以先检查系统或浏览器是否支持滚动截图、长截图或整页截图，再尝试“桌面版网站”并确认布局。这些是系统或浏览器功能，网页 JavaScript 不能保证调用它们。

如果手机不具备这些能力，而完整的桌面端长截图又是硬性要求，就需要增加一个能够执行截图的环境，例如电脑上的浏览器。仅靠页面内的一段 JavaScript，无法可靠补齐这些条件。