Waiting for a custom element to be ready in Node with Bent

The wait_for parameter is one of the most powerful feature of PDFShift. It allows you to control when the document is ready to be converted to PDF.

For instance, you might need the wait_for parameter to wait on your charts to be visible.

It makes sense because from our engine point of view, all the resources are loaded so the conversion to PDF can be executed. But from your page stand point, even though everything is loaded, not everything is rendered!

So by using the wait_for parameter, you can tell PDFShift to wait for a specific condition to be true before allowing the conversion to happen.

That property expects a string which points to a global function.

For instance, if in your HTML page, you have the following script:

<script>
function isPageReady() {
    return document.getElementById('chart').clientHeight > 0;
}
</script>

You can set the wait_for parameter to isPageReady and PDFShift will wait for the isPageReady function to return true before converting the page to PDF.

const bent = require('bent')
const fs = require('fs');

// You can get an API key at https://pdfshift.io
api_key = 'sk_xxxxxxxxxxxx'

params = {
    source: 'https://www.example.com',
    wait_for: 'isPageReady'
}

const getBuffer = bent('buffer')
fs.writeFileSync('result.pdf', await getBuffer(response));

console.log('The PDF document was generated and saved to result.pdf');

In case your page doesn't have the javascript function available, but you still need to wait on some elements to be rendered before continuing the conversion, you can add javascript code directly in the request and use it at the same time:

const bent = require('bent')
const fs = require('fs');

// You can get an API key at https://pdfshift.io
api_key = 'sk_xxxxxxxxxxxx'

params = {
    source: 'https://www.example.com',
    javascript: 'let isFontReady = false; document.fonts.ready.then(() => isFontReady = true); function isPageReady() { return isFontReady; }',
    wait_for: 'isPageReady'
}

const getBuffer = bent('buffer')
fs.writeFileSync('result.pdf', await getBuffer(response));

console.log('The PDF document was generated and saved to result.pdf');

The above script will wait for all fonts to be ready before returning true for the isPageReady function. PDFShift will then wait for the fonts to be ready, via the isPageReady, before converting the page to PDF.