How to fix the problem of the right side being completely black when creating a function to convert a web page to PDF

Introduction

I'm personally developing a web app using the Qiita API to download Qiita articles. While implementing an article that allows downloading Qiita articles as PDFs, I encountered an issue where the right side of the generated PDF was completely black.
I couldn't figure out the cause and it was quite stumping.

--

Cause

The problem was that I was using CSS designed for web screen display to generate the PDF (A4 size) as well.

Web page CSS is designed to stretch and shrink the layout to fit the browser screen size (a wide horizontal display area).

PDF, on the other hand, is a "paper" with fixed width and height, like A4 size.

As a result, when converting HTML displayed wide using CSS for screens to PDF,
the horizontal portions that did not fit within the A4 size were not handled correctly,
resulting in a problem where the right side of the PDF was black.

--

Solution

The solution was simple:
Create separate CSS for PDF generation.

Specifically, we created a separate CSS for PDFs,
assuming A4 size, in addition to the CSS for screen display.

The PDF CSS takes into consideration the following points:

• Specify the width in mm units
• Fix the background color to white
• Avoid using flex or 100vw for screens

css
.qiita-preview {
width: 190mm; /* Fit to A4 size */
background: #fff;
color: #000;
}
`

As a result, the layout, which had been overflowing horizontally,
fitted properly to A4 size,
and the issue of the black right side of the PDF was resolved.

Summary

The problem was solved by separating the CSS for screens and PDFs,
and preparing a layout assuming A4 size.
When generating PDFs, it's important to consider "screen display" and "paper display" separately.