es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Dibujar SVG con JointJS en el servidor backend utilizando NodeJS

27 Jul, 2023 Programación

Para un proyecto industrial, tenemos que dibujar una gran cantidad (~400/500) de diagramas hechos con jointjs y exportarlos como ficheros SVG en un único archivo PDF.

Con el fin de mejorar el rendimiento, el dibujo debería ser más eficiente si se hace mediante NodeJS en el servidor backend en lugar de tener múltiples solicitudes desde atrás hacia adelante.

Utilicé la biblioteca JSDOM para emular un DOM y dibujar SVG, pero ocurrió un error:

jsdom/node_modules/jquery/dist/jquery.js:32
throw new Error(“jQuery requires a window with a document”);


const jsdom = require("jsdom");

const { JSDOM } = jsdom;
const fs = require ('fs')
const joint = require ('jointjs')
const path = require ('path')

const filepath = path.join(__dirname , './template/raccordement.html')
const content = fs.readFileSync(filepath, {encoding:'utf8', flag:'r'});
const myLibrary = fs.readFileSync("../node_modules/jointjs/dist/joint.js", { encoding: "utf-8" });

const { window } = new JSDOM(content, {
    contentType: "text/html",
    includeNodeLocations: true,
    resources: "usable",
    storageQuota: 10000000,
    runScripts: "dangerously"
});

const $ = require('jquery')(window);

// Aquí se soluciona el error 'jQuery requires a window with a document'
global.window = window
global.document = window.document

global.jQuery = $
global.$ = $

var element = $('#raccordementDiv')

console.log (element.text())

var graph = new joint.dia.Graph;

const paper = new joint.dia.Paper({
    el: element,
    model: graph,
    width: 1600,
    height: 800,
    gridSize: 1,
    interactive: true,
    async: true,
    frozen: false,
    sorting: joint.dia.Paper.sorting.APPROX,
    background: { color: '#F3F7F6' },
    //cellViewNamespace: shapes
});

console.log (paper)

Después de muchas horas en internet buscando una solución, no sé cómo hacerlo.

También he probado con phantomJS pero parece estar más desactualizado, obsoleto y difícil de manejarlo.

Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Como experto en tecnología de la información especializado en jQuery, node.js, jsdom y jointjs, puedo sugerir algunas posibles soluciones al problema que estás enfrentando al dibujar diagramas SVG utilizando jointjs y exportarlos como un archivo PDF en un servidor backend.

    En primer lugar, el error “jQuery requiere una ventana con un documento” ocurre cuando jQuery no puede encontrar un objeto “window” que contenga una propiedad “document”. Esto suele suceder cuando jQuery se utiliza en un entorno de servidor donde no existe un objeto window. Para solucionar esto, puedes intentar usar la biblioteca jsdom para crear un entorno DOM en Node.js donde se pueda utilizar jQuery. Ya has utilizado la biblioteca JSDOM, pero el error todavía ocurre, así que puedes intentar los siguientes pasos:

    • Actualizar la versión de jQuery: intenta instalar la última versión de jQuery y verifica si el error todavía ocurre.
    • Configurar los objetos window y document de forma global: ya has intentado configurar los objetos window y document globalmente, pero puedes intentar hacerlo antes de importar la biblioteca jQuery, lo cual puede ayudar.
    const jsdom = require("jsdom");
const { JSDOM } = jsdom;
const { window } = new JSDOM(
  "<!DOCTYPE html><html><body></body></html>",
  {
    pretendToBeVisual: true,
    resources: "usable",
    runScripts: "dangerously",
  }
);

global.window = window;
global.document = window.document;

const $ = require("jquery")(window);
global.$ = $;
global.jQuery = $;
    • Usar un navegador sin interfaz gráfica como Puppeteer: puedes intentar usar Puppeteer, que es una biblioteca de Node.js que proporciona una API de alto nivel para controlar Chrome o Chromium sin interfaz gráfica a través del protocolo DevTools. Puppeteer se puede usar para generar archivos PDF a partir de HTML y también se puede usar para manipular el DOM y generar diagramas SVG.
    const puppeteer = require('puppeteer');

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

    await page.setContent('<html><body><div id="diagram"></div></body></html>');

    // Código para generar diagramas SVG utilizando JointJS

    const svgData = $('#diagram').html(); // Obtener el contenido HTML del diagrama
    const pdf = await page.pdf({ format: 'A4', printBackground: true });
    await browser.close();
})();

    En este ejemplo de código, puedes usar JointJS para generar diagramas SVG dentro de un elemento “div” con id “diagram”. Luego puedes obtener el HTML interno del elemento “div” y usarlo para generar un archivo PDF utilizando Puppeteer.

    En general, estas soluciones pueden ayudarte a generar diagramas SVG utilizando JointJS y exportarlos como un archivo PDF de manera eficiente en un servidor backend.

Comments are closed.