javascript - 如何通过 CDN 在我的网站中使用 puppeteer

标签 javascript node.js browser pdf-generation puppeteer

我正在尝试使用 Puppeteer 直接在我的网站上生成 PDF 文件。

我的问题是我不知道如何将所需的文件添加到我的网站。

所有指南都带有此行:

const puppeteer = require('puppeteer');

但是当我运行代码时,我收到此错误:require 未定义

这是我尝试运行的代码:

const puppeteer = require('puppeteer');

puppeteer.launch().then(async browser => {
  const page = await browser.newPage();
  await page.goto('https://www.google.com');
    await page.pdf({
    scale: 1,
    displayHeaderFooter: false,
    printBackground: true,
    landscape: false,
    path: 'hn.pdf',
    format: 'A4',
    width: 1200,
    height: 3500,
    margin: {
    top: 0,
    right: 0,
    left: 0,
    bottom: 0 
  }
  });
  await browser.close();
});

通常,当我想使用一些在线库时,它会附带一个 CDN 链接,或者您可以下载 .js 文件并将它们托管在我的网站中,然后我可以根据需要使用代码。

但在这种情况下,我用各种方式进行了搜索(大约 2.5 小时),但我找不到任何东西。

在 google Puppeteer CDN 上搜索我得到这个:https://www.jsdelivr.com/package/npm/puppeteer

但不知道如何使用.. 谢谢!

编辑:

经过一番尝试,我按照 Browserify 指南创建了一个 .js 文件。 我添加了这段代码:

const puppeteer = require('puppeteer');

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

并创建了该代码的 bundle ,它生成了以下 js 脚本:https://puu.sh/AGF4U/46204f1b5c.js

已将脚本添加到我的网站并立即尝试执行此代码:

(async () => {
  await page.goto('https://google.com', {waitUntil: 'networkidle2'});
  await page.pdf({path: 'hn.pdf', format: 'A4'});
  await browser.close();
})();

现在我在控制台上收到以下错误: https://puu.sh/AGF6I/149fb9ec2b.png

谢谢!

最佳答案

puppeteer 是一个 node.js 库,它不能在浏览器、网页上运行。将其视为需要在计算机/服务器上运行的程序。

要使用它,需要 install node.js首先,然后 install puppeteer ,然后使用制作屏幕截图的程序创建一个脚本文件,最后从命令提示符运行它,例如

>node /path/to/script.js

关于javascript - 如何通过 CDN 在我的网站中使用 puppeteer,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50892985/

相关文章:

javascript - 自动播放视频的 canvas.drawimage 仅在视频元素可见时才有效

Android Titanium Appcelerator - 路径必须是字符串。收到空值

javascript - 使用 'javascript:history.go(-1)' 有什么问题?

javascript - Chrome RangeError : Maximum call stack size exceeded when using jQuery $. map

javascript - 使用映射创建组件 - 但功能是相互关联的

javascript - 如何在 AngularJS 中使用 console.log 表达式?

javascript - Angular Controller 可以绑定(bind)到网页的多个部分吗?

javascript - 从 Controller 发出套接字 - 如何从 Controller 访问套接字服务器

javascript - 为什么不鼓励 `.catch(err => console.error(err))`?

javascript - 浏览器自动填充事件