时间戳

首页 > 解决方案 > 异步等待 puppeteer.launch 不工作 onClick 与 puppeteer-web

javascript - 异步等待 puppeteer.launch 不工作 onClick 与 puppeteer-web

问题描述

当在浏览器中单击按钮时，我试图能够在服务器上运行 puppeteer 节点任务。我不确定我是否设置了正确的环境，因为我得到了"Uncaught (in promise) TypeError: Cannot read property 'call' of undefined".

当我从 CMD 运行 $node src/js/pdfTest.js 时，它会按预期输出文件，所以我不确定我缺少什么。我正在使用 puppeteer/puppeteer-web.js、C# .NET、JavaScript，并在我的本地 windows/WSL 机器上安装了 Node 10.15.0

pdf.html

<head>
    <script src="src/js/libs/jquery-3.3.1.min.js"></script>
    <script src="src/js/libs/handlebars/handlebars-v4.1.0.js"></script>
    <script src="src/js/handlebarsHelpers.js"></script>
    <script src="src/js/templates.js"></script>
</head>
<body>
    <button id="pdfBtn">Save PDF</button>
    <div id="pdf">
    </div>
    <script src="src/js/pdf.js"></script>
    <script src="src/js/pdfTest.js"></script>
</body>

（我从另一个js文件的#pdf div内的页面上加载了一个把手模板）

pdf.js

var Pdf = (function () {
    'use strict';

    $(document).ready(function () {
        render();
    });

    function render() {
    console.log("rendering pdf.js");
        $("#pdfBtn").on("click", function () {
            PdfTest.printPDF();
        });
    }

    return {
        render: render
    }
}());

pdfTest.js

var PdfTest = (function () {
    async function printPDF() {
        const puppeteer = require('puppeteer');

        (async () => {
            const browser = await puppeteer.launch();
            const page = await browser.newPage();

            await page.goto('http://localhost:60639/pdf.html');
            await page.waitFor(2000);
            await page.pdf({ path: 'src/pdf/mynewpdf.pdf', format: 'A4', printBackground: true })
            await browser.close();
        })()
    };

    return {
       printPDF: printPDF
    }
}());

当我从命令行调用它时，来自 pdfTest.js 的这段代码（如果我只用这段代码替换上面的代码）运行良好。

const puppeteer = require('puppeteer');

(async () => {
    const browser = await puppeteer.launch();
    const page = await browser.newPage();

    await page.goto('http://localhost:60639/pdf.html');
    await page.waitFor(2000);
    await page.pdf({ path: 'src/pdf/mynewpdf.pdf', format: 'A4', printBackground: true })
    await browser.close();
})()

错误：

Uncaught (in promise) TypeError: Cannot read property 'call' of undefined
    at puppeteer-web.js:8902
    at new Promise (<anonymous>)
    at promisified (puppeteer-web.js:8894)
    at Launcher.launch (puppeteer-web.js:5074)
    at module.exports.launch (puppeteer-web.js:7887)
    at pdfTest.js:85
    at Object.printPDF (pdfTest.js:92)
    at HTMLButtonElement.<anonymous> (postTrekPdf.js:43)
    at HTMLButtonElement.dispatch (jquery-3.3.1.min.js:2)
    at HTMLButtonElement.y.handle (jquery-3.3.1.min.js:2)

标签： javascriptc#node.js.netpuppeteer

解决方案

在浏览器javascript中没有功能require()

您必须将事件发送到主线程，因为此代码在浏览器的客户端工作，并且浏览器无法打开另一个浏览器。您还可以将 API 请求发送到例如。本地主机/dosmthn。

在发送 html 文件的控制台上制作网络服务器。在此文件中，当您单击按钮时发送 API 请求，并且您的 nodejs 应用程序执行 puppeteer 操作。并返回给你（浏览器）pdf文件。然后你可以在浏览器中显示这个文件。

我希望它有帮助

推荐阅读