如果你从事网页抓取工作且使用 Node.js，那么你很可能听说过 Puppeteer。而且你肯定遇到过需要使用 Puppeteer 下载文件的任务。这确实是抓取社区中一个常见的任务。但 Puppeteer 的官方文档对此并未做详细说明。
幸运的是，我们将共同解决这个问题。本文将探讨 Puppeteer 中的文件下载功能。今天我想带大家了解两个重点：
读完本文后，你将掌握开发人员构建文件爬虫所需的理论与实践技能。如果这个项目听起来像我一样令人兴奋，那就让我们开始吧！
文件爬虫的应用场景非常广泛，StackOverflow 上也充斥着众多开发者寻求如何使用 Puppeteer 下载文件的解答。我们需要明白，文件涵盖了图片、PDF、Excel 或 Word 文档等众多类型。不难理解，这些文件为何能为某些人提供至关重要的信息。
例如，代发货行业的企业往往依赖从外部来源（如电商平台）抓取的图片。另一个典型的应用场景是用于监控官方文件的公司，甚至小型项目。我本人就有一段脚本，专门从合作伙伴的网站下载发票。
说到使用 Puppeteer 下载文件，我发现大多数人选择它的主要原因有两个：
要理解如何使用 Puppeteer 下载文件，我们必须先了解 Chrome 是如何实现的。这是因为，从本质上讲，Puppeteer 是一个通过 Chrome DevTools 协议（CDP）“控制”Chrome 的库。
在 Chrome 中，文件可以通过以下方式下载：
此外，在网页抓取中还存在第三种技术。即引入一个新的参与者：HTTP 客户端。通过这种方式，网页抓取工具会收集文件的 `href` 链接，随后使用 HTTP 客户端下载这些文件。每种方法都有其特定的应用场景，因此我们将探讨这两种方式。
幸运的是，若您要抓取文件的网站使用了按钮，您只需在 Puppeteer 中模拟点击事件即可。在此场景下，文件下载器的实现非常简单。Puppeteer 甚至对 Page.click() 方法进行了文档说明，您可在此处查阅更多信息。
由于这是“类人”行为，我们需要做的是：
脚本中只需实现这四个简单的步骤。不过，在开始编写代码之前，请注意：与您日常使用的浏览器一样，由 Puppeteer 控制的 Chrome 实例会将下载的文件保存到默认下载文件夹中，路径为：
了解这一点后，让我们开始编写代码。假设我们是天体物理学家，需要从 NASA 收集一些数据，以便后续处理。目前，我们先专注于下载 .doc 文件。
我们将访问 NASA 的网站，并检查页面元素。我们的重点是识别“可点击”元素。要查找这些元素，请打开开发者工具（Chrome 浏览器中为 Command + Option + I / Control + Shift + I）：
import puppeteer from "puppeteer"
(async () => {
const browser = await puppeteer.launch({ headless: false })
const page = await browser.newPage()
await page.goto('https://www.nasa.gov/centers/dryden/research/civuav/civ_uav_doc-n-ref.html',
{ waitUntil: 'networkidle0' })
const tr_elements = await page.$x('html/body/div[1]/div[3]/div[2]/div[2]/div[5]/div[1]/table[2]/tbody/tr')
for (let i = 2; i<=tr_elements.length; i ++) {
const text = await tr_elements[i].evaluate(el => el.textContent)
if (text.toLocaleLowerCase().includes('doc')) {
try {
await page.click(`#backtoTop > div.box_710_cap > div.box_710.box_white.box_710_white > div.white_article_wrap_detail.text_adjust_me > div.default_style_wrap.prejs_body_adjust_detail > table:nth-child(6) > tbody > tr:nth-child(${i}) > td:nth-child(3) > a`)
}catch {}
}
}
await browser.close()
})()此处的操作步骤如下：
就这样。使用 Puppeteer 下载文件可以简单到极致。
我知道对于小型项目，默认的下载文件夹并不是什么大问题。但对于大型项目，您肯定希望将 Puppeteer 下载的文件整理到不同的目录中。 而这就是 CDP 派上用场的地方。为了实现这一目标，我们将保留当前的代码并仅在此基础上进行扩展。
首先想到的是解析当前目录的路径。幸运的是，我们可以使用内置的 `node:path` 模块。我们只需将 `path` 模块导入项目，并使用 `resolve` 方法即可，稍后您将看到具体实现。
第二个方面是使用 CDP 在浏览器中设置路径。正如我之前所说，我们将使用 Page Domain 的 `.setDownloadBehavior` 方法。以下是添加这两项后的更新代码：
import puppeteer from "puppeteer"
import path from 'path'
(async () => {
const browser = await puppeteer.launch({ headless: false })
const page = await browser.newPage()
const client = await page.target().createCDPSession()
await client.send('Page.setDownloadBehavior', {
behavior: 'allow',
downloadPath: path.resolve('./documents')
});
await page.goto('https://www.nasa.gov/centers/dryden/research/civuav/civ_uav_doc-n-ref.html',
{ waitUntil: 'networkidle0' })
const tr_elements = await page.$x('html/body/div[1]/div[3]/div[2]/div[2]/div[5]/div[1]/table[2]/tbody/tr')
for (let i = 1; i<=tr_elements.length; i ++) {
const text = await tr_elements[i].evaluate(el => el.textContent)
if (text.toLocaleLowerCase().includes('doc')) {
try {
await page.click(`#backtoTop > div.box_710_cap > div.box_710.box_white.box_710_white > div.white_article_wrap_detail.text_adjust_me > div.default_style_wrap.prejs_body_adjust_detail > table:nth-child(6) > tbody > tr:nth-child(${i}) > td:nth-child(3) > a`)
} catch {}
}
}
await browser.close()
})()以下是新增代码的功能说明：
若想通过 Puppeteer 更改文件保存目录，只需完成上述操作即可。此外，我们已成功实现了构建文件下载型网络爬虫的目标。
我们讨论的第三种方案是收集目标网站的链接，并使用 HTTP 客户端进行下载。我个人更倾向于使用 axios，但在网页抓取领域也有其他替代方案。因此，在本教程中，我将使用 axios，并假设我们正在构建一个用于抓取拍卖车辆图片的爬虫。
const get_links = async (url) => {
const hrefs = []
const browser = await puppeteer.launch({ headless: false })
const page = await browser.newPage()
await page.goto(url, { waitUntil: 'networkidle0' })
const images = await page.$$('img')
for (let i = 1; i<=images.length; i ++) {
try {
hrefs.push(await images[i].evaluate(img => img.src))
} catch {}
}
await browser.close()
return hrefs
}相信此刻您已熟悉 Puppeteer 的语法。与上述脚本不同，我们现在要做的是遍历 `img` 元素，提取其源 URL，将其追加到数组中，并返回该数组。这个函数没有什么花哨之处。
const download_file = async (url, save) => {
const writer = fs.createWriteStream(path.resolve(save))
const response = await axios({
url,
method: 'GET',
responseType: 'stream'
})
response.data.pipe(writer)
return new Promise((resolve, reject) => {
writer.on('finish', resolve)
writer.on('error', reject)
})
}这个函数稍显复杂，因为它引入了两个新包：`fs` 和 `axios`。`fs` 包中的第一个方法不言自明，它创建了一个可写流。你可以在此处了解更多相关信息。
接下来，我们使用 axios 连接服务器的 URL，并告知 axios 响应类型为“流”。最后，由于我们正在处理流，我们将使用 `pipe()` 函数将响应写入流中。
完成上述配置后，剩下的就是将这两个函数组合成可运行的程序。只需添加以下几行代码即可：
let i = 1
const images = await get_links('https://www.iaai.com/Search?url=PYcXt9jdv4oni5BL61aYUXWpqGQOeAohPK3E0n6DCLs%3d')
images.forEach(async (img) => {
await download_file(img, `./images/${i}.svg`)
i += 1
})Puppeteer 的文档对文件下载的说明可能不够清晰。尽管如此，今天我们还是探索出了多种实现方法。但请注意，使用 Puppeteer 抓取文件并非易事。因为 Puppeteer 会启动一个无头浏览器，而这类浏览器通常会被迅速封禁。
如果您正在寻找一种隐蔽的程序化文件下载方式，不妨关注网络爬虫服务。在 Web Scraping API，我们投入了大量时间和精力来隐藏我们的指纹，以避免被检测到。这在我们的成功率上得到了切实体现。使用 Web Scraping API 下载文件就像发送一个 curl 请求一样简单，剩下的工作由我们来处理。
综上所述，我衷心希望今天的文章能对您的学习有所帮助。此外，希望我们已达成最初设定的双重目标。从现在起，您应该能够构建自己的工具，并使用 Puppeteer 下载文件。
Mihnea-Octavian Manolache 是 WebScrapingAPI 的全栈及 DevOps 工程师，负责开发产品功能并维护确保平台平稳运行的基础设施。
