使用CSS样式，引导样式和更改页面上的元素将HTML转换为pdf

Question

我正在尝试使用CSS样式将时间表转换为pdf。但是，我发现很少有使用css样式将html转换为pdf的方法，该方法可以满足我的要求。所以我想做的就是将html的这一部分转换为pdf。我曾经链接到另一个样式表，然后将其转换为pdf。但是，它缩小了时间表，无法显示所有时隙。另外，我从其他人使用的原始打印功能在打印时不会在时间表中显示按钮。

<div id="content">

<div id="tableSpace">

    <!-- Date scroll bar fixed to top of schedule -->
    <div id="dateScroll">

    </div>

    <div id="timetable">
    <!-- Times column -->
        <div class="dayColumn" id="timeColumn">
            <div class="time">7:30 - 8:30 AM</div>
            <div class="time">8:30 - 9:30 AM</div>
            <div class="time">9:30 - 10:30 AM</div>
            <div class="time">10:30 - 11:30 AM</div>
            <div class="time">11:30 - 12:30 PM</div>
            <div class="time">12:30 - 1:30 PM</div>
            <div class="time">1:30 - 2:30 PM</div>
            <div class="time">2:30 - 3:30 PM</div>
            <div class="time">3:30 - 4:30 PM</div>
            <div class="time">4:30 - 5:30 PM</div>
            <div class="time">5:30 - 6:30 PM</div>
            <div class="time">6:30 - 7:30 PM</div>
            <div class="time">7:30 - 8:30 PM</div>
            <div class="time">8:30 - 9:30 PM</div>
            <div class="time">9:30 - 10:30 PM</div>
            <div class="time">10:30 - 11:30 PM</div>
            <div class="time">11:30 - 12:30 AM</div>
        </div>

        <!-- Monday -->
        <div class="dayColumn" id="mondayFunday">

        </div>

        <!-- Tuesday -->
        <div class="dayColumn" id="tuesdayFunday">

        </div>

        <!-- Wednesday -->
        <div class="dayColumn" id="wednesdayFunday">

        </div>

        <!-- Thursday -->
        <div class="dayColumn" id="thursdayFunday">

        </div>

        <!-- Friday -->
        <div class="dayColumn" id="fridayFunday">

        </div>

        <!-- Saturday -->
        <div class="dayColumn">
            <div class="timeSlot"></div>
            <div class="timeSlot"></div>
            <div class="timeSlot"></div>
            <div class="timeSlot"></div>
            <div class="timeSlot"></div>
            <div class="timeSlot"></div>
            <div class="timeSlot"></div>
            <div class="timeSlot"></div>
            <div class="timeSlot"></div>
            <div class="timeSlot"></div>
            <div class="timeSlot"></div>
            <div class="timeSlot"></div>
            <div class="timeSlot"></div>
            <div class="timeSlot"></div>
            <div class="timeSlot"></div>
            <div class="timeSlot"></div>
            <div class="timeSlot"></div>
        </div>

        <!-- Sunday -->
        <div class="dayColumn">
            <div class="timeSlot"></div>
            <div class="timeSlot"></div>
            <div class="timeSlot"></div>
            <div class="timeSlot"></div>
            <div class="timeSlot"></div>
            <div class="timeSlot"></div>
            <div class="timeSlot"></div>
            <div class="timeSlot"></div>
            <div class="timeSlot"></div>
            <div class="timeSlot"></div>
            <div class="timeSlot"></div>
            <div class="timeSlot"></div>
            <div class="timeSlot"></div>
            <div class="timeSlot"></div>
            <div class="timeSlot"></div>
            <div class="timeSlot"></div>
            <div class="timeSlot"></div>
        </div>
    </div>   
</div>

该网站的主要目标是让其他人使用事件列表中的按钮修改时间表后，将时间表导出为pdf。我希望提供一个按钮来将时间表导出为pdf。这是指向密码笔的链接：https://codepen.io/zeyingzhou/pen/drJLKj

pdf的预期结果：