如何在Vue.js中使用Puppeteer

Question

我正在尝试在vue.js应用程序中集成puppeteer以生成屏幕截图和PDF文件。我编写了一个使用puppeteer生成屏幕截图的函数，效果非常好。

export const MyScripts = {
    getMiniature : async function(elementId, key) {
        const puppeteer = require('puppeteer');
        const browser = await puppeteer.launch();
        const page = await browser.newPage();
        // Making a screenshot
    }
}

尝试集成该功能时，加载puppeteer失败。'require'没有生成错误，但是当我调用puppeteer.launch()时，出现以下消息：

TypeError: nodeFunction未定义

我已经阅读了puppeteer不应该与前端应用程序一起使用的信息，因此希望我没有选择错误的方向。

那么我该如何使其工作？ 如果不可能，我可以使用什么来生成屏幕截图或pdf？

提前致谢。

- MrFernand

Answer 1

Puppeteer与Vue无关，它与Node一起使用。Node.js基本上是在服务器上运行的JavaScript，因此与前端分离。Puppeteer使用一个无头浏览器（因此使用您的实际系统）来生成截图和PDF文件。

客户端浏览器无法访问您的文件系统，因此您无法在像Vue这样的前端框架中使用它来生成截图并保存它们。

我不知道是否有任何工具可以生成当前页面的屏幕截图，而且这些工具都还在高度实验阶段，但我相信您可以在深入研究stackoverflow时找到更多信息。

- Stephan-v

---

是的，有一些受欢迎的客户端项目，比如拥有13k颗星的html2canvas，所以它在这个阶段并不高度实验性。 :D - Md. Abu Taher

当然，正如你在问题跟踪器中所看到的那样，它也存在着不一致的行为。除非你想将它用于副业项目，否则我不建议在生产环境中使用它。 - Stephan-v

这对我来说是个坏消息... 感谢您的澄清。 我不会选择html2canvas，因为我需要可靠的东西... - MrFernand

问题计数与不一致有什么关系？Puppeteer有269个未解决的问题，我们不能将支持谷歌的项目与普通项目进行比较，而html2canvas完全是客户端的：D。好吧，事实就是如此，我至少做了100个网页抓取API，而Node版本总是最佳选择 :) - Md. Abu Taher

我并没有提到问题数量。一个大项目有很多问题并不重要。但问题的严重程度是真正的问题。如果你花超过3秒钟查看这些问题，你就会知道这一点。 - Stephan-v

Answer 2

免责声明：本文不会教您如何在客户端上运行puppeteer（chromium），它只会向您展示如何连接到运行在其他地方的puppeteer实例。

目前在puppeteer版本1.9.0上是完全可行的（需要一些麻烦）。

下面我列出了puppeteer web、客户端pdf和图像生成以及外部API。

1. Puppeteer Web

看起来您正在尝试将puppeteer捆绑到Web应用程序中。Tip-of-tree Puppeteer更易于捆绑，并在其package.json中包含浏览器字段，这应该有助于捆绑。

您必须了解一个事实，即前端除了REST / WS API之外，没有任何其他方式可以访问后端。因此，您要么使用这些API，要么自己构建一些API。您可以构建一个简单的express API并从vue应用程序中使用它。有很多资源和stackoverflow问题可以帮助您完成。

在这个笔记中，我们将使用闪亮的puppeteer-web捆绑。 :)

运行Chrome并获取browserWSEndpoint

你需要在某个地方运行 chrome 才能拥有这个。可能是在你托管Vue应用程序的服务器上。假设它是 chromium，你可以使用以下代码。

chromium
--disable-background-networking \
--disable-background-timer-throttling \
--disable-breakpad \
--disable-client-side-phishing-detection \
--disable-default-apps \
--disable-dev-shm-usage \
--disable-extensions \
--disable-features=site-per-process \
--disable-hang-monitor \
--disable-popup-blocking \
--disable-prompt-on-repost \
--disable-sync \
--disable-translate \
--metrics-recording-only \
--no-first-run \
--safebrowsing-disable-auto-update \
--enable-automation \
--password-store=basic \
--use-mock-keychain \
--remote-debugging-port=0

这将导致类似以下内容的结果，DevTools监听ws://127.0.0.1:57683/devtools/browser/foo

制作puppeteer浏览器版本

克隆puppeteer仓库，安装所有模块并运行命令以获取您可以嵌入UI的特定Web版本。

git clone https://github.com/GoogleChrome/puppeteer
npm install
npm run bundle

你会看到一个 utils/browser/puppeteer-web.js 文件。这是你需要在vue或web应用程序中嵌入的内容。

要求puppeteer浏览器并连接到端点

<script type="text/javascript" src="puppeteer-web.js"></script>
<script type="text/javascript">
const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.connect({
    browserWSEndpoint: theirBrowserWSEndpoint 
    // the exact same browser WS endpoint that just loaded this page, 
    // example, ws://127.0.0.1:57683/devtools/browser/foo
  });

  const page = await browser.newPage();

  .. a whole bunch of operations to perform to data scraping, etc.
})()
</script>

PS：我很快会撰写一篇详细的文章或答案，并提供各种截图，请保持关注。

2. 捕获当前页面的屏幕截图和pdf

您可以使用html2canvas来收集当前页面的屏幕截图。只需调用并使用它即可。vue-resume使用此功能生成最终图像。如果您想捕获当前页面或其中的任何部分，这将非常有用。

示例用法：

var element = document.getElementById('capture');
html2canvas(element).then(canvas => {
    document.body.appendChild(canvas) // do whatever want with the image data
});

生成PDF文件也是一样的。你可以使用html2pdf来完成。

var element = document.getElementById('capture');
html2pdf(element); // prompts the user to save the result

3. 屏幕截图生成API

如果您仍需要生成屏幕截图，可以使用现有的服务。以下是其中一些（注意，该列表可能在未来没有更新并且无法工作）。

• Restpack：https://restpack.io/screenshot
• Thum：https://www.thum.io
• URL2PNG：https://www.url2png.com
• url-to-pdf-api：https://github.com/alvarcarto/url-to-pdf-api

- Md. Abu Taher