Disabling Error Notification Toast when Generating PDF from a Vue Project

Intro

When generating a PDF from a webpage using Puppeteer in a Vue project, it’s often desirable to prevent the display of any error notification popups. This was the challenge I encountered. Specifically, in a Vue project, when a REST API call failed, a notification popup would appear on the browser screen. If a PDF version of the webpage needed to be generated, this popup would persist in the output. An example of this scenario is illustrated below:

Approach

My solution involved utilizing a media query. Initially, I attempted to conditionally disable the notification based on the screen size. I added the following CSS code to App.vue:

<style>
@media only screen and (max-width: 596px) {
  .toastNotification {
    display: none !important;
  }
}
</style>c

Here, max-width: 596px corresponds to the dimensions of the PDF report (595px * 842px). In this project, the vue-toastification library is employed for toast notifications. In the main.ts file, the configuration is defined as follows:

...
import Toast from 'vue-toastification';
...
app.use(Toast, {
  transition: 'Vue-Toastification__fade',
  maxToasts: 20,
  newestOnTop: true,
  toastClassName: 'toastNotification',
});type

However, this approach proved ineffective. I suspected that additional Puppeteer configurations might be required. I experimented with the setViewport function and adjusted the width and length parameters for the page.pdf function. My attempts included the following:

const browser = await puppeteer.launch({
        executablePath: '/usr/bin/google-chrome',
        headless: 'new', args: ['--no-sandbox', '--disable-setuid-sandbox'],
        defaultViewport: null
    });
const page = await browser.newPage();

await page.setViewport({ width: 595, height: 842 });
await page.goto(url, {waitUntil: 'networkidle0', timeout: 0});

...


const pdfBuffer = await page.pdf({
    printBackground: true,
    format: 'A4',
    width: '595px',
    height: '842px',
    displayHeaderFooter: true,
    margin: { right: '20px', left: '20px', top: '130px', bottom: '80px' },
    headerTemplate: header,
    footerTemplate: footer
});

Regrettably, none of these attempts yielded the desired outcome. The generated PDF continued to display the error notification.

Solution

Ultimately, I came to the realization that the page.pdf process in Puppeteer essentially emulates a "print to PDF" action. Consequently, regardless of the screen size set within Puppeteer, the page.pdf process remains unaffected.

For the solution, I modified the media query in App.vue as follows:

<style>
@media print {
  .toastNotification {
    display: none !important;
  }
}
</style>

With this adjustment, error notification toasts no longer appear in the generated PDF.

Originally published at https://williamyuaus.com on August 11, 2023.