使用 Puppeteer 在客户端生成 PDF

Question

我正在努力让 Puppeteer 在浏览器中下载文件。我目前将文件保存在 Cloud9 本地，但我想单击下载 PDF 按钮并在 Chrome 中下载。

我尝试将 page.pdf 保存到变量中，但没有奏效。我也试过打开本地保存的文件，但我也无法让它工作。

var express = require("express");
var puppeteer = require("puppeteer");

module.exports = function pdf(url, req) {(async () => {
      var browser = await puppeteer.launch();
      var page = await browser.newPage();
      await page.goto('https://node-and-mysql-mbegg.c9users.io/clients/'+req.params.id+'/reports/monthlyreport/'+req.params.marketplace+'/'+req.params.month, {waitUntil: 'networkidle2'});
      await page.pdf({path: 'public/temp/Performance Report -'+req.params.month+'.pdf', format: 'A4', landscape: true, printBackground: true});

      await browser.close();
    })();
}

///Print PDF route
router.get("/clients/:id/reports/monthlyreport/:marketplace/:month/pdf", function(req, res) {
    var url = "/clients/"+req.params.id+"/reports/monthlyreport/"+req.params.marketplace+"/"+req.params.month
    pdf(url, req);
    res.contentType("application/pdf");
    res.send(pdf);;
});

我知道 res.send(pdf) 需要将 page.pdf() 保存到变量并返回。我只是没有从路线中删除它。

当我将 page.pdf() 保存到变量时会发生什么，我只是得到一个空白文件 - 而不是 PDF - 它似乎只是一个空白缓冲区或其他东西。我不知道我做错了什么没有在 chrome 浏览器中下载文件。

Answer 1

虽然在pdf 函数中，您似乎在等待每个puppeteer 操作，但实际上您并没有在快速路由中等待对pdf 函数的调用。此外，pdf 函数现在不会返回任何内容！您需要对您的程序进行以下修改：

1. pdf 函数应返回生成的 PDF 保存到的文件名。当你在它的时候，不妨摆脱 IIFE，它不是必需的，只需将外部函数声明为 async。
2. 在路由函数中，程序应该等待从pdf(...) 调用返回的文件名。这可以通过使用 Promise 或 await 来完成。如果首选等待，则应将外部函数标记为异步。
3. 应该使用 express 在response 对象上提供的sendFile 函数将生成的PDF 文件发送给客户端。请注意，res.sendFile 需要文件的绝对路径。

以下是实现这些的程序的修改版本。

const express = require("express");
const puppeteer = require("puppeteer");
const path = require('path');

module.exports = async function pdf(url, req) {
    const filename = `public/temp/Performance Report -${req.params.month}.pdf`;
    const browser = await puppeteer.launch();
    const page = await browser.newPage();

    await page.goto('https://node-and-mysql-mbegg.c9users.io/clients/'+req.params.id+'/reports/monthlyreport/'+req.params.marketplace+'/'+req.params.month, {waitUntil: 'networkidle2'});
    await page.pdf({path: filename, format: 'A4', landscape: true, printBackground: true});

    await browser.close();
    return filename;
}

///Print PDF route
router.get("/clients/:id/reports/monthlyreport/:marketplace/:month/pdf", async function(req, res) {
    var url = "/clients/"+req.params.id+"/reports/monthlyreport/"+req.params.marketplace+"/"+req.params.month

    const filename = await pdf(url, req);
    res.contentType("application/pdf");
    res.sendFile(path.join(__dirname, filename)); // if 'public/temp/...' path is not relative to cur dir, make relevant change here.
});

Answer 2

///  Async/await
router.get("/clients/:id/reports/monthlyreport/:marketplace/:month/pdf", async function(req, res) {
    var url = "/clients/"+req.params.id+"/reports/monthlyreport/"+req.params.marketplace+"/"+req.params.month
    let pdfData = await pdf(url, req);
    res.contentType("application/pdf");
    res.send(pdfData);
});
///  promise
router.get("/clients/:id/reports/monthlyreport/:marketplace/:month/pdf", async function(req, res) {
    var url = "/clients/"+req.params.id+"/reports/monthlyreport/"+req.params.marketplace+"/"+req.params.month
    pdf(url, req).then((pdfData )=>{
        res.contentType("application/pdf");
        res.send(pdfData);
    });
});

您既没有等待该过程完成。您还发送了函数，而不是它的结果。