实现网站长截图

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

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)GoogleChromeApplicationchrome.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)

})

})

})

});

填自己的谷歌浏览器路径

然后执行node test.js

就能跑起来了

五、还有一种方法（本人没有亲自测试，只是看到，感觉不错）

Nodejs中利用phantom把html转为pdf或图片格式

链接：https://blog.csdn.net/younglao/article/details/77746039

相关知识

站长之家用户中心
WINE界面与字体美化全攻略，及我的常用WINE程序截图展示
中国花协绿化观赏苗木分会站长会议召开
如何自动识别手写字体内容？一键截图轻松识别手写字体
《GTAOL》新模式截图 敌人比子弹多
花集网ios版下载
happyzcool字体
湖北恩施举行“漫游绝壁花海,推动网红经济”主题活动
优花网：鲜花果篮为中秋送礼添光增彩
《黑神话：悟空》摄影展来了：人人可参与游戏截图作品 落地展出

网址: 实现网站长截图 https://www.huajiangbk.com/newsview899476.html

上一篇: 【海康威视】前端开发：【3】IE

下一篇: 前端开发能做多久？