如何在 vue.js 中使用 puppeteer [英] How to use puppeteer in vue.js

问题描述

我正在尝试将 puppeteer 集成到 vue.js 应用程序中以生成屏幕截图和 pdf 文件.我写了一个使用 puppeteer 生成截图的函数，效果很好.

I'm trying to integrate puppeteer in a vue.js application to generate screenshots and pdf files. I have write a function that use puppeteer to generate a screenshot, works perfectly.

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() 时，我收到以下消息:

When trying to integrate that function, it fails to load puppeteer. The 'require' doesn't generate error, but when I call puppeteer.launch(), I got the following message:

类型错误:nodeFunction 未定义

TypeError: nodeFunction is undefined

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

I've read that puppeteer is not supposed to work with front-end application, so I hope I have not chosen the wrong direction.

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

So how can I make it work ? If it is not possible, what can I use to generate screenshots or pdf ?

提前致谢

推荐答案

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

Puppeteer works with Node, it has nothing to do with Vue. Node.js is pretty much JavaScript running on a server and therefore separated from your frontend. Puppeteer uses a headless browser(and therefore your actualy system) to generate the screenshots and PDF files.

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

A client-side browser has no access to your filesystem and so therefore you can't use it in a frontend framework like Vue to generate screenshots and save them.

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

I don't know of any tools to generate screenshots of the current page that are not highly experimental but I am sure you could find some more information when deep-diving stackoverflow.

这篇关于如何在 vue.js 中使用 puppeteer的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！