我正在尝试将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
}
}
当尝试集成该功能时，它无法加载人偶。 'require'不会产生错误，但是当我调用puppeteer.launch（）时，出现以下消息：
TypeError：nodeFunction未定义
我已经读过木偶戏不应该与前端应用程序一起使用，所以我希望我没有选择错误的方向。
那么我该如何运作呢？ 如果不可能，我可以使用什么来生成屏幕截图或pdf？
预先感谢
答案 0 :(得分：2)
Puppeteer与Node一起使用，与Vue无关。 Node.js几乎是服务器上运行的JavaScript，因此与您的前端分离。 Puppeteer使用无头浏览器（因此也是您的实际系统）来生成屏幕截图和PDF文件。
客户端浏览器无法访问您的文件系统，因此您不能在Vue之类的前端框架中使用它来生成屏幕截图并保存。
我不知道有什么工具可以生成当前页面的屏幕截图，这些工具的实验性不是很强，但是我敢肯定，在深入探讨stackoverflow时，您会发现更多信息。
答案 1 :(得分：1)
免责声明：这不会向您展示如何在客户端上运行puppeteer。这只会向您展示如何连接到在其他地方运行的操纵up实例。
现在肯定有可能在puppeteer version 1.9.0 （有点头疼）。
下面我列出了puppeteer网站，客户端pdf和图像生成以及外部API。
您似乎正在尝试捆绑puppeteer以在Web应用程序中使用。树梢Puppeteer更加易于捆绑，并且在package.json中包含了浏览器字段，该字段应有助于捆绑。
您需要了解的一点是，除了REST / WS API之外，前端没有任何其他方式可以访问后端。因此，您必须使用那些API或自己构建一些api。您可以构建一个简单的express API并从vue应用程序中使用它。有很多资源和堆栈溢出问题。
关于这一点，让我们使用闪亮的puppeteer-web捆绑包。 ：）
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
克隆人偶仓库，安装所有模块并运行命令以获取可嵌入到UI中的特定Web版本。
git clone https://github.com/GoogleChrome/puppeteer
npm install
npm run bundle
您将看到一个utils/browser/puppeteer-web.js文件。这就是您需要嵌入到vue或网络应用程序中的内容。
<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：我将很快写一篇有关各种屏幕截图的文章/答案，敬请期待。
您可以使用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
如果仍然需要生成屏幕截图，则可以使用可用的服务。以下是其中的一些内容（（ps，该列表将来可能不会更新，并且无法正常工作。）