如何下载在 puppeteer 的新标签页中打开的 pdf？

Question

I have a page with a button. When I click that button, it opens a PDF in a new tab.

How can I download the PDF as a file with puppeteer?

Maybe I can write a file with the buffer from the new tab. But I am not sure how.

Answer 1

A simple solution is to use the fetch api to execute the GET request. This way you can read the response, pass it to your backend and save it to disk.

Use this sample code as reference:

import fs from 'fs';

async function downloadImage(page: any, url: string, fullpath: string) {
  const data = await page.evaluate(
    // tslint:disable-next-line no-shadowed-variable
    async ({ url }) => {
      function readAsBinaryStringAsync(blob) {
        return new Promise((resolve, reject) => {
          const fr = new FileReader();
          fr.readAsBinaryString(blob);
          fr.onload = () => {
            resolve(fr.result);
          };
        });
      }

      const r = await fetch(url, {
        credentials: 'include',
        headers: {
          accept: 'text/html,application/xhtml+xml,application/xml;q=0.9,image/webp, */*;q=0.8',
          'cache-control': 'no-cache',
          pragma: 'no-cache',
          'sec-fetch-mode': 'navigate',
          'sec-fetch-site': 'same-site',
          'upgrade-insecure-requests': '1'
        },
        referrerPolicy: 'no-referrer-when-downgrade',
        body: null,
        method: 'GET',
        mode: 'cors'
      });

      return await readAsBinaryStringAsync(await r.blob());
    },
    { url }
  );

  fs.writeFileSync(fullpath, data, { encoding: 'binary' });
}

Answer 2

Use puppeteer-extra node module.

Puppeteer-extra

const puppeteer = require('puppeteer-extra');
...
...
puppeteer.use(require('puppeteer-extra-plugin-user-preferences')({userPrefs: {
   download: {
     prompt_for_download: false,
     open_pdf_in_system_reader: true
  },
  plugins: {
    always_open_pdf_externally: true // this should do the trick
  }
}}))

const browser = await puppeteer.launch();

browser.on('targetcreated', async (target) => {
   console.log('targetcreated');
   if (target.type() !== 'page') {
     return;
   }
   try {
     const pageList = await browser.pages();
     pageList.forEach((page) => {
       page._client.send('Page.setDownloadBehavior', {
         behavior: 'allow',
         downloadPath: './pdfDownloaded/',
       });
     });
   } catch (e) {
     console.log("targetcreated", e);
   }
});
...
...

But when i set the always_open_pdf_externally: true chrome crashes.

try if it works for you, and please post back the answer if you found any