Estoy tratando de integrar titiritero en una aplicación vue.js para generar capturas de pantalla y archivos pdf. He escrito una función que usa titiritero para generar una captura de pantalla, funciona perfectamente.

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
    }
}

Al intentar integrar esa función, falla al cargar titiritero. El 'require' no genera error, pero cuando llamo a puppeteer.launch (), recibí el siguiente mensaje:

TypeError: nodeFunction no está definida

He leído que se supone que el titiritero no funciona con la aplicación frontal, así que espero no haber elegido la dirección equivocada.

Entonces, ¿cómo puedo hacer que funcione? Si no es posible, ¿qué puedo usar para generar capturas de pantalla o pdf?

Gracias de antemano

3
MrFernand 16 oct. 2018 a las 14:51

2 respuestas

La mejor respuesta

Puppeteer trabaja con Node, no tiene nada que ver con Vue. Node.js es prácticamente JavaScript que se ejecuta en un servidor y, por lo tanto, está separado de su interfaz. Puppeteer utiliza un navegador sin cabeza (y por lo tanto su sistema actual) para generar las capturas de pantalla y archivos PDF.

Un navegador del lado del cliente no tiene acceso a su sistema de archivos y, por lo tanto, no puede usarlo en un marco de interfaz como Vue para generar capturas de pantalla y guardarlas.

No conozco ninguna herramienta para generar capturas de pantalla de la página actual que no sean muy experimentales, pero estoy seguro de que podría encontrar más información cuando profundice en stackoverflow.

3
Stephan-v 16 oct. 2018 a las 12:59

Descargo de responsabilidad: esto no le mostrará cómo ejecutar titiritero (cromo) en el lado del cliente. Esto solo le mostrará cómo conectarse a una instancia de titiritero que se ejecuta en otro lugar.

Ahora mismo es definitivamente posible en puppeteer version 1.9.0 (con un poco de dolor de cabeza) .

A continuación, enumeré la web de titiriteros, la generación de imágenes y pdf del lado del cliente y la API externa.

1. Red de titiriteros

Parece que estás intentando agrupar titiritero para usarlo en una aplicación web. Tip-of-tree Puppeteer es mucho más fácil de empaquetar e incluye el campo del navegador en su package.json que debería ayudar con el empaquetado.

Una cosa que debe comprender es que el frontend no tiene ningún acceso al backend por ningún otro medio que no sea REST / WS API. Entonces, o tienes que usar esas API o crear alguna API tú mismo. Puede crear una API rápida simple y usarla desde la aplicación vue. Hay muchos recursos y preguntas sobre el flujo de pila para eso.

En esa nota, usemos el brillante paquete titiritero-web. :)

Ejecute Chrome y obtenga browserWSEndpoint

Necesita ejecutar chrome en algún lugar para tener esto. Probablemente en el servidor donde está alojando la aplicación vue. Suponiendo que es el chromium, puede usar el siguiente código

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

Esto resultará en algo como, DevTools escucha en ws://127.0.0.1:57683/devtools/browser/foo

Hacer la versión del navegador titiritero

Clone el repositorio titiritero, instale todos los módulos y ejecute el comando para obtener una versión web específica que puede incrustar en su interfaz de usuario.

git clone https://github.com/GoogleChrome/puppeteer
npm install
npm run bundle

Verá un archivo utils/browser/puppeteer-web.js. Eso es lo que necesita para incrustar en su vue o aplicación web.

Requerir navegador titiritero y conectarse al punto final

<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>

PD: pronto escribiré un artículo / respuesta en profundidad al respecto con todo tipo de capturas de pantalla, estad atentos.

2. Capturar la página actual como captura de pantalla y pdf

Puede utilizar html2canvas para recopilar una captura de pantalla de la página actual. Es tan simple como llamarlo y usarlo. vue-resume utiliza esto para generar la imagen final. Útil si está intentando capturar la página actual o cualquier parte de ella.

Uso de ejemplo,

var element = document.getElementById('capture');
html2canvas(element).then(canvas => {
    document.body.appendChild(canvas) // do whatever want with the image data
});

Lo mismo ocurre con la generación de PDF. Puede utilizar html2pdf para hacerlo.

var element = document.getElementById('capture');
html2pdf(element); // prompts the user to save the result

3. API de generación de capturas de pantalla

Si aún necesita generar una captura de pantalla, puede utilizar los servicios disponibles. Estos son algunos de ellos (ps, es posible que la lista no se actualice en el futuro y no funcione).

2
Md. Abu Taher 27 jun. 2019 a las 14:34