Como puedo cargar imagenes al template HTML y otros ASSETS?

CristianCucunuba commented 5 years ago

Hola, estoy intentando cargar imagenes y archivos CSS, JS al template pero solo logro cargar estos archivos cuando los tengo localmente. El proyecto esta en node este es mi codigo:

app.js

const templateInformeCF = `require('../public/assets/templates/informe-cf')
const jsreport = require('jsreport-core')({
     "extensions": {
        "phantom-pdf": {
            "numberOfWorkers": 1,
            "timeout": 180000,
            "allowLocalFilesAccess": true,
        },
      }
})
jsreport.use(require('jsreport-phantom-pdf')())
jsreport.use(require('jsreport-ejs')())
jsreport.init().then(() => {
            return jsreport.render({
                template: {
                    content: templateInformeCF,
                    engine: 'ejs',
                    recipe: 'phantom-pdf'
                },
                data: {
                    foo: "world"
                }
            }).then((resp) => {
                // prints pdf with headline Hello world
                // console.log(resp)
                 fs.writeFileSync(`${pathTemplatePDF}/informe-cf.pdf`, resp.content)    
            }).catch((e)=>{
                console.log(e)
            })
        }).catch((e) => {
            console.error(e)
        })

informe-cf.js

const path = require('path');
const pathTemplatePDF = path.join(__dirname)
let body = `<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
    <title>Document</title>
    <style>
        .texto{
            color:red;
            font-weight: bold;
        }
        .purple {
            color: purple;
        }
    </style>
</head>
<body>
    <h1 id="texto" class="texto"><%= foo %></h1>
    <img src='https://images.unsplash.com/photo-1551235669-df52e038ccf6?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=442&q=80' width="135" height="250"></img>**//No carga en el PDF**
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>**//No carga**
    <script>
        $(".texto").html('purple')
        $(".texto").css('color', 'purple')
        // var elem = document.getElementById('texto');

        // elem.style.color = 'yellow'
    </script>
</body>
</html>`
module.exports = body`

CristianCucunuba commented 5 years ago

Si me puedieras ayudar @bjrmatos Estaria muy agradecido o si estoy usando la libreria de la forma incorrecta.Gracias.

bjrmatos commented 5 years ago

hola, probablemente los links no cargan por que la pagina del reporte es http y los links usan https, creo que puedes probar cargando los links con http en lugar de https. o la otra solución es que carges localmente esos recursos dentro de entidades assets y los carges como tal.

PD: en el futuro es mejor abrir issues en ingles, ya que ese es el lenguaje oficial del soporte, y el lenguaje que todos los colaboradores usan para comunicarse.

CristianCucunuba commented 5 years ago

Hi thank you for answering , changing the link to HTTP still does not work, I also have another problem, How do i make asynchronous JavaScript in the PDF. We already try the waitForJS property like this and does not work:

APP JS

const jsreport = require('jsreport-core')({
        "extensions": {
            "phantom-pdf": {
                waitForJS: true,
                "numberOfWorkers": 1,
                "timeout": 180000,
                "allowLocalFilesAccess": true,
            },
        },
})

pdf.html

setTimeout(function(){
            window.JSREPORT_READY_TO_START = true;
            $(".texto").html('purple')
 }, 3000);

bjrmatos commented 5 years ago

Hi thank you for answering , changing the link to HTTP still does not work, I also have another problem

i see, you should try the assets entities then.

I also have another problem, How do i make asynchronous JavaScript in the PDF. We already try the waitForJS property like this and does not work

you should specify the waitForJS in the render options of template property, like this:

jsreport.render({
                template: {
                    content: templateInformeCF,
                    engine: 'ejs',
                    recipe: 'phantom-pdf',
                    phantom: {
                      waitForJS: true
                    }
                },
                data: {
                    foo: "world"
                }
            })

CristianCucunuba commented 5 years ago

Wow this one DO works thank you so much, this library is all i need and more awesome work.

jsreport / jsreport-phantom-pdf

Como puedo cargar imagenes al template HTML y otros ASSETS? #34