ggrossetie / asciidoctor-web-pdf

Convert AsciiDoc documents to PDF using web technologies
https://asciidoctor.org
MIT License
448 stars 92 forks source link

PDF Output is blank #36

Open rrmayer opened 5 years ago

rrmayer commented 5 years ago

Using the examples, I tried running a couple out of curiosity. The PDF is produced, but only the images render. There is no text. Is there something I'm needing to do or install beyond what asciidoc normally requires?

Also, it might not be a bad idea to put some additional information in the Readme about getting started (e.g. install npm, etc. - I can provide something if it would be worthwhile).

Sample file is located here

ggrossetie commented 5 years ago

Using the examples, I tried running a couple out of curiosity. The PDF is produced, but only the images render. There is no text. Is there something I'm needing to do or install beyond what asciidoc normally requires?

No it should work, you need to clone the project, run npm install (Node.js 8+) and you should be fine. Could you please run the following command:

node -v
npm -v

Are you on Windows ? What command are you running ?

Also, it might not be a bad idea to put some additional information in the Readme about getting started (e.g. install npm, etc. - I can provide something if it would be worthwhile).

This project is still experimental but yes it's a good idea to add an "Install" section.

We are still discussing what should be included in this project and how we should package it (https://github.com/Mogztter/asciidoctor-pdf.js/issues/20). That's the main reason why this project is not yet released on npmjs. Otherwise the installation would be straight forward using npm.

If you want to submit a pull request to add this section, that would be great :+1:

ggrossetie commented 5 years ago

ping @rrmayer :wink:

rrmayer commented 5 years ago

OK -> so for the first question, I'm running this on a Ubuntu 18.x LTS box. I also use this for development on Angular, so it has the latest versions (or relatively latest) of node and npm. I did run npm i prior to doing anything else, and I don't remember it giving me any errors, beyond the normal warnings for packages not compatible with Ubuntu.

npm -v // 3.5.2
node -v // v8.10.0 

Command details:

$ npm i
npm WARN optional Skipping failed optional dependency /chokidar/fsevents:
npm WARN notsup Not compatible with your operating system or architecture: fsevents@1.2.7

$ ./bin/asciidoctorjs-pdf ./examples/letter/letter.adoc --template-require ./examples/letter/template.js
asciidoctor: WARNING: gem 'concurrent-ruby' is not installed. This gem is recommended when registering custom converters.

At this point, I check the pdf located in ./examples/letter/letter.pdf and it is blank but for the images. So, clearly something is happening, just not 100%.

And my apologies for the delay, apparently no notifications are being sent to me (or they are getting lost in the 100+ emails I get every day)

ggrossetie commented 5 years ago

so for the first question, I'm running this on a Ubuntu 18.x LTS box. I also use this for development on Angular, so it has the latest versions (or relatively latest) of node and npm. I did run npm i prior to doing anything else, and I don't remember it giving me any errors, beyond the normal warnings for packages not compatible with Ubuntu.

The project requires Node.js 8.11+ and npm 5+ but I think it should work with your versions.

At this point, I check the pdf located in ./examples/letter/letter.pdf and it is blank but for the images. So, clearly something is happening, just not 100%.

I think I have an idea. The stylesheet is using a Google Fonts "Open Sans" but if the font can't be loaded, the font can't be rendered and thus the blank page:

https://github.com/Mogztter/asciidoctor-pdf.js/blob/40cd54d78b1bc152a5d6acfdc16e7ef3185532f7/examples/letter/letter.css#L1

Did you run the command in a restricted network ? Could you please try to update the letter.css file to replace the Google Font with a system font ?

And my apologies for the delay, apparently no notifications are being sent to me (or they are getting lost in the 100+ emails I get every day)

No worries 😉

rrmayer commented 5 years ago

So that was it - I commented out the import in the CSS and changed the font family to Ubuntu, and the letter rendered. I'm not aware of any reason that URL wouldn't go through, except maybe it's not a good source for the stylesheet?

ggrossetie commented 5 years ago

@rrmayer Are you behind a corporate network ? Maybe for some reason fonts.googleapis.com is blocked ?

For reference we are using the following configuration in Puppeteer:

ggrossetie commented 5 years ago

I did reproduce this issue on a low-end laptop. I think it's a timing issue and I don't know if I can workaround it... it's not an easy task because I can't reliably reproduce it :sweat:

ahus1 commented 4 years ago

The PR #113 both waits longer (no network connection should be active) and also provides a hook to ensure that the rendering completed the page (the standard template implements this, custom templates might pick it up later).

Here's a snippet from template.js that sets a ready flag for the converter to wait for the PDF to be created.

window.AsciidoctorPDF = window.AsciidoctorPDF || {}
window.AsciidoctorPDF.status = 'rendering'
class PagedReadyHandler extends Paged.Handler {
    afterRendered(pages) {
        window.AsciidoctorPDF.status = 'ready'
    }
}

I'd consider this issue solved (but other templates needs to follow to indicate when their rendering is complete).