使用puppeteer怎么实现一个html截图功能？很多新手对此不是很清楚，为了帮助大家解决这个难题，下面小编将为大家详细讲解，有这方面需求的人可以来学习下，希望你能有所收获。
安装
直接运行安装命令：
npm install puppeteer
如果出现无法安装的问题，可以使用淘宝镜像。
puppeteer实现滑动截图
在我 puppeteer 使用截全屏的过程中发现有些图片无法截取到，而实际上是因为有些图片是懒加载的，如果你没有滑动到图片的位置，那么这个图片是不会加载。
现在我的方式是采用模拟浏览器滚动条滑动的方式滑动底部来使图片加载出来。
代码如下：
计算
安全
数据库
网络和加速
企业服务
const puppeteer = require('puppeteer');
(async () => {
const browser = await puppeteer.launch({
headless: false
});
const page = await browser.newPage();
await page.goto('https://www.cnblogs.com/morethink/p/6525216.html');
await page.setViewport({
width: 1200,
height: 800
});
await autoScroll(page);
await page.screenshot({
path: '1.png',
fullPage: true
});
await browser.close();
})();
function autoScroll(page) {
return page.evaluate(() => {
return new Promise((resolve, reject) => {
var totalHeight = 0;
var distance = 100;
var timer = setInterval(() => {
var scrollHeight = document.body.scrollHeight;
window.scrollBy(0, distance);
totalHeight += distance;
if (totalHeight >= scrollHeight) {
clearInterval(timer);
resolve();
}
}, 100);
})
});
}动图如下：
puppeteer 实现 html element 截图
在某些情况下我们只想要针对html的某个位置进行截图而不是针对页面截全屏。
puppeteer提供了ElementHandle.screenshot 方法，该方法参数和page.screenshot 一样。而ElementHandle 对象是页面内的Dom对象。可以帮助我对 html element进行截图。这样的话你想截取页面的哪部分就截取页面的哪部分。
代码如下：
const puppeteer = require('puppeteer');
(async () => {
const browser = await puppeteer.launch({
headless: false
});
const page = await browser.newPage();
await page.goto('https://www.cnblogs.com/morethink/p/6525216.html');
await page.setViewport({
width: 1200,
height: 800
});
//获取页面Dom对象
let body = await page.$('#cnblogs_post_body');
//调用页面内Dom对象的 screenshot 方法进行截图
await body.screenshot({
path: '2.png'
});
await browser.close();
})();看完上述内容是否对您有帮助呢？如果还想对相关知识有进一步的了解或阅读更多相关文章，请关注亿速云行业资讯频道，感谢您对亿速云的支持。
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
