如何在 vue.js 中使用 puppeteer

Question

我正在尝试将 puppeteer 集成到 vue.js 应用程序中以生成屏幕截图和 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() 时，我收到以下消息：

类型错误：nodeFunction 未定义

我读过 puppeteer 不应该与前端应用程序一起工作，所以我希望我没有选择错误的方向。

那么我怎样才能让它工作呢？如果不可能，我可以用什么来生成屏幕截图或 pdf ？

提前致谢

Answer 1

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

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

我不知道有任何工具可以生成当前页面的屏幕截图，但不是高度实验性的，但我相信您可以在深入了解 stackoverflow 时找到更多信息。

Answer 2

免责声明：这不会向您展示如何在客户端运行 puppeteer (chromium)。这只会向您展示如何连接到在其他地方运行的 puppeteer 实例。

现在这绝对是可能的puppeteer version 1.9.0 （有点头疼）。

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

1. 傀儡网

您似乎正在尝试捆绑 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

如果您仍然需要生成屏幕截图，您可以使用可用的服务。以下是其中一些，（ps，该列表将来可能不会更新，并且无法工作。）

• 重新打包： https: //restpack.io/screenshot
• 拇指：https: //www.thum.io
• URL2PNG： https: //www.url2png.com
• url-to-pdf-api： https: //github.com/alvarcarto/url-to-pdf-api