实现网站长截图

最新推荐文章于 2025-07-18 11:09:36 发布

热爱前端的小君同学

最新推荐文章于 2025-07-18 11:09:36 发布

阅读量4.3k

点赞数 2

CC 4.0 BY-SA版权

分类专栏：前端

本文链接：https://blog.youkuaiyun.com/qq_37815596/article/details/88557506

前端专栏收录该内容

105 篇文章

订阅专栏

一、简单手动截图（手动截图，推荐使用，本人亲测成功）

1.开发者程序

Chrome 开发者工具中其实自带了截图命令，按下 ⌘Command + ⌥Option + I（Windows 为 F12）快捷键，召唤出调试界面。
随后，按下 ⌘Command + ⇧Shift + P（Windows 为 Ctrl + Shift + P），输入命令 Capture full size screenshot（只输前几个字母就能找到），敲下回车，Chrome 就会自动截取整个网页内容并保存至本地。
除了普通长截图以外，你还可以利用这一功能截取手机版网页长图。只需要按下 ⌘Command + ⇧Shift + M （Windows 为 Ctrl + Shift + M）模拟移动设备，再按刚才的方法运行命令就可以了。在顶部的工具栏中，你可以选择要模拟的设备和分辨率等设置。
如果你想准确截取网页的某一部分，可以按下 ⌘Command + ⇧Shift + C（Windows 为 Ctrl + Shift + C）嗅探元素。选中想要的部分后，再运行 Capture node screenshot 命令，一张完美的选区截图就诞生了。

2.chrome的扩展程序

到chrome的应用商店添加Full Page Screen Capture

二、html2canvas实现对网站长截图（自动截图，推荐使用，本人亲测成功）

import React, { Component } from 'react';
import html2canvas from 'html2canvas'
import "./App.css"
import LeftFoot from "./Left@3x.png"
import RightFoot from "./Right@3x.png"
import purple from "./purple_big@3x.png"
class App extends Component {
  componentDidMount() {
    let shot = document.getElementById('press');
    html2canvas(shot).then(function (canvas) {
      document.body.appendChild(canvas);
      let imgData = canvas.toDataURL('image/png');
      console.log("imgData", imgData);
    });
  }
  render() {
    return (
      <div id="press">
        <img src={LeftFoot} alt="LeftFoot" width="500px" height="auto" />
        <img src={RightFoot} alt="RightFoot" width="500px" height="auto" />
        <img src={purple} alt="purple" width="150px" height="auto" />
      </div>
    );
  }
}
export default App;

三、html2canvas+jsPDF实现,页数多时，会自动分页（截图，推荐使用，本人亲测成功）

import React, { Component } from "react";
import { Button, Icon } from "semantic-ui-react";
import "semantic-ui-css/semantic.min.css";
import "./App.css";
import html2canvas from "html2canvas";
import jsPDF from "jspdf";
class App extends Component {
  constructor(props) {
    super(props);
    this.download = this.download.bind(this);
  }
  download() {
    html2canvas(document.body, {
      useCORS: true,
      allowTaint: false,
      scale: 2
    }).then(function (canvas) {
      var contentWidth = canvas.width;
      var contentHeight = canvas.height;
      //一页pdf显示html页面生成的canvas高度;
      var pageHeight = (contentWidth / 595.28) * 841.89;
      //未生成pdf的html页面高度
      var leftHeight = contentHeight;
      //页面偏移
      var position = 0;
      //a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
      var imgWidth = 595.28;
      var imgHeight = (592.28 / contentWidth) * contentHeight;
      var pageData = canvas.toDataURL("image/jpeg", 1.0);
      var pdf = new jsPDF("", "pt", "a4");
      //有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
      //当内容未超过pdf一页显示的范围，无需分页
      if (leftHeight < pageHeight) {
        pdf.addImage(pageData, "JPEG", 0, 0, imgWidth, imgHeight);
      } else {
        while (leftHeight > 0) {
          pdf.addImage(pageData, "JPEG", 0, position, imgWidth, imgHeight);
          leftHeight -= pageHeight;
          position -= 841.89;
          //避免添加空白页
          if (leftHeight > 0) {
            pdf.addPage();
          }
        }
      }
      pdf.save("study.pdf");
    });
  }
  render() {
    return (
      <div className="device-detail-container">
        <Button basic onClick={() => this.download()}>
          <Icon name="download" />
          Download Report
        </Button>
        <p>学习下载</p>
      </div>
    );
  }
}
export default App;

四、node实现（这个后台实现，比较复杂，不推荐使用）

下载node.js:https://nodejs.org/en/
找到node安装的目录（跟本章内容无关，仅仅作为一个小知识）

which node

使用command+shift+G，在弹出的目录中填写/usr/local/bin/node就可以了

新建一个目录，将目录拖入到iTerm，在iTerm中执行命令

npm i puppeteer

然后将代码粘贴到新建的test.js内

//开启浏览器模式
const puppeteer = require('puppeteer');
puppeteer.launch({ headless: false,executablePath: 'C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe'}).then(function (browser)  {
    browser.newPage().then(function (page) {
            page.goto('https://www.baidu.com').then(function(){
                page.screenshot({path: 'test.png',fullPage:true}).then(function (data) {
                    //图片资源  自行处理
                    console.log(data)
                })
            })
    })
});