Print.js: print image with raw-html

[RodrigoDLopez]

Hi, i'm trying to print a response from a post request.
this response, maybe have some images, and i'm not abble to print this images.
i need to convert to base64, and because of this, my timing is groing up.

const {data} = await axios.post( url , {
                params: params
            });

            printJS({
                type: 'raw-html',
                css: css,
                scanStyles: true,
                printable: data,
                targetStyles: ['*'],
            });

can i load this images directly, without having to convert them?

[crabbly]

Hey Rodrigo,
When printing raw html the library won't try to pre-load the images. That said, it will fire the print job before the images are loaded. That's probably why you are not getting them.

Honestly, I'm not sure what is the best way to handle this. One option would be for the lib to scan the raw html, identify image tags, grab their src / url and pre-load them automatically. :/

[JandersonConstantino]

Hey Rodrigo,
When printing raw html the library won't try to pre-load the images. That said, it will fire the print job before the images are loaded. That's probably why you are not getting them.

Honestly, I'm not sure what is the best way to handle this. One option would be for the lib to scan the raw html, identify image tags, grab their src / url and pre-load them automatically. :/

Hi Rodrigo,
I don't consider the best way, but I think in any like this:

  if (params.type === 'raw-html' && printDocument.getElementsByTagName('img').length > 0) {
    let imgTags = printDocument.getElementsByTagName('img')
    let imagesloaded = 0

    for (let x = 0; x < imgTags.length; x++) {
      imgTags[x].onload = () => {
      imagesloaded++

      if (imagesloaded === imgTags.length) {
        performPrint(iframeElement, params)
      }
    }
  }

[JandersonConstantino]

How it will work:
https://codepen.io/jandersonconstantino/pen/QRGrJz

[RodrigoDLopez]

Hey Janderson... i did something similar.
but my time still growing up... I'll need to do a refactor.
turn the response into pdf and them print.
but many thx, your code give me another way... i will try and see if your solution work pretty for me.
see ya

[crabbly]

Hey guys, I like it. Something like that may work.

@JandersonConstantino, We should use promises similar to the loadIframeImages. In fact, maybe we can make the image loading methods to be used when printing images or html. Reusing some code / keeping the lib small.

What do you think?

[JandersonConstantino]

Sounds good to me.
If nobody makes a pull request I will make these changes later.

[RodrigoDLopez]

awesome... i like it

[crabbly]

Hey @bartolomeukuma, v1.0.57 just got published to npm. It includes the updates from @JandersonConstantino to pre-load raw html images.

Please run npm update print-js to get the latest version and give it a try.

[RodrigoDLopez]

hey folks, i saw the PR.
but i couldn't preload my images, i need to pass some parameter?

[crabbly]

Interesting. Are your images using img tags or svg?

[RodrigoDLopez]

img tags.

<img src="/upload/image/logo/1749/yHMQOLYfH81wBNQIXftBS7DBVgupkstvRS6PLpeu.jpeg" width="205" heigth="85">

[crabbly]

Make sure you are using the latest version that includes Janderson's changes.
It's working fine for me.

I created a codesandbox replicating the codepen example, but to import the lib npm package instead.
Check it out:
https://codesandbox.io/s/laughing-taussig-bdm49

[RodrigoDLopez]

I did the update but for some reason did not occur as expected.
Can you create a mined file for me?

Many thx... you guys are awesome

[crabbly]

Hey Rodrigo,

The minified files are available here:
https://github.com/crabbly/Print.js/releases/latest

Closing this since it looks like the issue on your side. Fee free to reopen if necessary.
Thank you.