前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >deno牌puppeteer,真香!

deno牌puppeteer,真香!

作者头像
胡琦
发布2021-09-09 10:33:16
1.1K0
发布2021-09-09 10:33:16
举报
文章被收录于专栏:胡琦

Deno 牌 Puppeteer,真香!

又双叒叕一堆 deno 的插件开源了,这次他们将目光转向了 puppeteer,deno-puppeteer、puppeteer_deno、deno-puppeteer-adapter…… 基本都是最近一个月诞生的,甚至还引发了“造轮子”的质疑。至于在 Deno中该如何使用 Puppeteer,如果您只是想简单运用,跟着Copy攻城狮的步伐就够了,如果您想深入了解,建议深入到源码中学习!

puppetter-deno

从截图说起

deno puppetter

puppeteer是一个Node库,它提供了高级API来通过DevTools协议控制Chrome或Chromium,puppeteer 默认以 headless 运行,但是可以通过修改配置文件完整(non-headless)运行。puppeteer常常被用来生成页面的屏幕截图和PDF、实现SSR、自动化测试等等,在业界也有不少企业级的运用,比如有赞商城前端团队使用puppeteer搭建统一海报渲染服务,TCB 的云函数也支持 puppeteer 依赖。于是也有开发者想在 deno 中使用puppeteer,就有了上图中的issue 。

deno-x-ranking puppetter

尽管有人排斥造轮子,但应该没人反对为了方便而使用轮子。抱着“这类轮子是不是很泛滥?”的疑问,我在 deno-x-ranking 上特意以 puppetter 进行了检索,这两个插件都是基于 puppetter 源码修改 -- “拥抱TS,拥抱 Deno”。既然轮子有了,赶紧安装试试!

尝鲜 deno 版的puppetter

Copy攻城狮的拿手本领当然是Copy啦,在尝试了截图中那个issue下的demo之后,发现还是在deno社区找到的puppeteer_deno好使。Just Do IT !

在Mac上,一小段代码就实现了截取掘金首屏:

代码语言:javascript
复制
// mod.ts
// 引入 puppeteer
import puppeteer from 'https://deno.land/x/pptr/mod.ts';

// 运行Chrome
const browser = await puppeteer.launch({
  executablePath: '/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome',
});

// 打开掘金并截图、生成pdf
const page = await browser.newPage();

await page.goto('https://juejin.cn',{
    waitUntil: 'networkidle2',
});
await page.screenshot({ path: 'juejin.png' });
await page.pdf({ path: 'juejin.pdf', format: 'a4' });

// 关闭
await browser.close();

执行deno run -A --unstable mod.ts就能获取到如下结果,在当前目录生成juejin.pngjuejin.pdf:

puppetter_deno

获取掘金酱的个人成就

原本想从掘金的搜索入口入手,先从关键字搜索到用户列表,再从列表中的用户链接跳转到个人页,不过因为学艺不精被掘金的骨架屏难住了,另外我用的page.waitFor也报错了,因此暂时从useid入手,获取指定useid的个人成就,代码惨不忍睹:

代码语言:javascript
复制
// mod.ts

// 引入 puppeteer
import puppeteer from 'https://deno.land/x/pptr/mod.ts';

// 运行Chrome
const browser = await puppeteer.launch({
  executablePath: '/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome',
  headless: true,
  args: ['--no-sandbox', '--disable-setuid-sandbox'],
  dumpio: false,
});

const page = await browser.newPage();
const uid = '1556564194374926'

// 跳转到指定id的个人页
await page.goto('https://juejin.cn/user/' + uid, {
  waitUntil: 'networkidle2', 
})

// 获取dom的信息
const staticInfo = await page.evaluate(() => {
  const element:any = document.querySelector('.minor-area')
  const elementLen:number = element.getElementsByClassName('stat-item').length
  const obj:any = {}
  for(let i:number = 0; i<elementLen;i++) {
      obj[i] = element.getElementsByClassName('stat-item').item(i).querySelector('.content')
      .innerHTML.replace(/<[^>]+>/g," ")
  }
  return {obj}
})
await browser.close()

console.dir(staticInfo)

以上代码返回掘金酱的个人成就:

代码语言:javascript
复制
{
  obj: { "0": "掘金优秀作者", "1": "获得点赞 2,710 ", "2": "文章被阅读 386,134 ", "3": "掘力值 6,571 " }
}

小结

总得来说在Deno上使用puppeteer能获取和Node同样优秀的体验,对Copy攻城狮来说,多一份代码多一种选择,大胆地尝试,总会有收获,哪怕只是微不足道的收获。每天进步一点点,一年更比一年好!

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2021-01-14,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 胡琦 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • Deno 牌 Puppeteer,真香!
    • 从截图说起
      • 尝鲜 deno 版的puppetter
        • 获取掘金酱的个人成就
          • 小结
          相关产品与服务
          云函数
          云函数(Serverless Cloud Function,SCF)是腾讯云为企业和开发者们提供的无服务器执行环境,帮助您在无需购买和管理服务器的情况下运行代码。您只需使用平台支持的语言编写核心代码并设置代码运行的条件,即可在腾讯云基础设施上弹性、安全地运行代码。云函数是实时文件处理和数据处理等场景下理想的计算平台。
          领券
          问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档