CODEWITHSUNDEEP
javascriptnode.jspuppeteer
Nagarjun Prasad
Nagarjun Prasad

Reputation: 924

How to obtain a pdf embedded in page through puppeteer?

I am trying to obtain a pdf copy of a page whose structure is like so:

<body style="background-color: rgb(38,38,38); height: 100%; width: 100%; overflow: hidden; margin: 0">
    <embed width="100%" height="100%" name="plugin" id="plugin" src="https://www.thesourceurl.com" type="application/pdf" internalinstanceid="7" title="">
</body>

I tried getting it with page.pdf but I got a blank pdf with "Couldn't load plugin" written in the middle.

Upvotes: 2

Views: 4498

Answers (2)

Nagarjun Prasad
Nagarjun Prasad

Reputation: 924

For anyone else who stumbled upon this question,

At the time of writing this, it's a known bug in chromium where you are unable to navigate to a pdf or a page embedded with pdf in headless:true mode.

I found a temporary solution to this here, though you have to know the url where you will obtain the pdf beforehand.

page.exposeFunction("writeABString", async (strbuf, targetFile) => {

        var str2ab = function _str2ab(str) { // Convert a UTF-8 String to an ArrayBuffer

            var buf = new ArrayBuffer(str.length); // 1 byte for each char
            var bufView = new Uint8Array(buf);

            for (var i=0, strLen=str.length; i < strLen; i++) {
              bufView[i] = str.charCodeAt(i);
            }
            return buf;
        }

        console.log("In 'writeABString' function...");

        return new Promise((resolve, reject) => {

            // Convert the ArrayBuffer string back to an ArrayBufffer, which in turn is converted to a Buffer
            let buf = Buffer.from(str2ab(strbuf));

            // Try saving the file.        
            fs.writeFile(targetFile, buf, (err, text) => {
                if(err) reject(err);
                else resolve(targetFile);
            });
        });
    });

At the previous page where you have to get the pdf from use an evaluate call and fetch api to initially get the buffer response and convert the same:

page.evaluate( async () => { 

    function arrayBufferToString(buffer){ // Convert an ArrayBuffer to an UTF-8 String

        var bufView = new Uint8Array(buffer);
        var length = bufView.length;
        var result = '';
        var addition = Math.pow(2,8)-1;

        for(var i = 0;i<length;i+=addition){
            if(i + addition > length){
                addition = length - i;
            }
            result += String.fromCharCode.apply(null, bufView.subarray(i,i+addition));
        }
        return result;
    }

   let geturl = "https://whateverurl.example.com";

   return fetch(geturl, {
       credentials: 'same-origin', // usefull when we are logged into a website and want to send cookies
       responseType: 'arraybuffer', // get response as an ArrayBuffer
   })
   .then(response => response.arrayBuffer())
   .then( arrayBuffer => {
       var bufstring = arrayBufferToString(arrayBuffer);
       return window.writeABString(bufstring, '/tmp/downloadtest.pdf');
   })
   .catch(function (error) {
       console.log('Request failed: ', error);
   }); 
 });

Upvotes: 3

TedOC
TedOC

Reputation: 180

This seems to be a bug in Puppeteer. It definitely used to work in earlier versions.

See https://github.com/GoogleChrome/puppeteer/issues/1872

Upvotes: 2

Related Questions