javascript - 使用 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 的功能。这是codepen的链接：https ://codepen.io/zeyingzhou/pen/drJLKj

预期pdf的结果：

标签： javascriptjqueryhtmlcss