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
:
|
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:
|
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:
|
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:
|
With this adjustment, error notification toasts no longer appear in the generated PDF.