CSS reveal.js print to pdf只打印第一张幻灯片
在本文中，我们将介绍如何解决使用https://sotoolbox.com/tag/css target="_blank" rel="nofollow">CSS reveal.js在打印pdf时只打印第一张幻灯片的问题。reveal.js是一个基于HTML和CSS的开源库，用于创建漂亮的幻灯片展示。然而，有时候当我们想要将幻灯片以PDF格式保存或打印时，却遇到了只打印第一张幻灯片的问题。下面我们将探讨这个问题的原因以及如何解决它。
阅读更多：https://sotoolbox.com/tag/css target="_blank" rel="nofollow">CSS 教程
问题原因
在reveal.js中，幻灯片通过分段元素<section>进行划分。默认情况下，reveal.js只会在当前视口内渲染活动的幻灯片节选。而当我们使用打印功能或将幻灯片保存为PDF时，通常会生成多个页面，以便逐页打印每个节选。然而，在reveal.js中，只有第一张幻灯片的节选被正确显示和打印，而其他节选则无法正确显示。
这个问题的关键在于CSS的“分页”规则。默认情况下，CSS会根据内容自动创建新的页面。然而，在reveal.js中，幻灯片节选的内容是通过自定义的JavaScript来呈现的，而不是静态的HTML内容。因此，默认的分页规则无法正确识别和处理这些动态内容，导致只有第一张幻灯片被正确打印。
解决方法
要解决reveal.js只打印第一张幻灯片的问题，我们需要更改CSS的分页规则，以正确地打印每个幻灯片节选。
1. 添加自定义的CSS规则
首先，我们可以通过添加一些自定义的CSS规则来控制分页行为。我们需要使用@media print媒体查询，通过page-break-before或page-break-after属性来指定分页的位置。例如，我们可以为每个节选添加以下CSS规则：
@media print {
section {
page-break-after: always;
}
}
上述CSS规则指定在每个节选之后都插入分页符。这样，打印或保存为PDF时，每个节选都会被正确地分页打印。
2. 修改reveal.js源代码
另一种解决方法是直接修改reveal.js的源代码。我们需要定位到reveal.js的源码文件src/js/print-pdf/print-pdf.js，然后找到以下代码段：
window.onload = function() {
var link = document.createElement( 'link' );
link.rel = 'stylesheet';
link.type = 'text/https://sotoolbox.com/tag/css target="_blank" rel="nofollow">css';
link.href = window.location.search.match( /print-pdf/gi ) ? 'css/print/pdf.css' : 'css/print/paper.css';
document.getElementsByTagName( 'head' )[0].appendChild( link );
};
将上述代码替换为以下代码：
window.onload = function() {
var link = document.createElement( 'link' );
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = window.location.search.match( /print-pdf/gi ) ? 'css/print/pdf.css' : 'css/print/paper.css';
document.getElementsByTagName( 'head' )[0].appendChild( link );
var sections = document.querySelectorAll( '.reveal section' );
for( var i = 1; i < sections.length; i++ ) {
var section = sections[i];
section.classList.add( 'stack' );
}
};
上述代码会为从第二个节选开始的所有节选添加一个stack类，以实现正确的分页效果。这样，在打印或保存为PDF时，所有的节选都能被正确地分页打印。
示例
让我们通过一个示例来演示如何解决reveal.js只打印第一张幻灯片的问题。
<!DOCTYPE https://sotoolbox.com/tag/css target="_blank" rel="nofollow">html>
<https://sotoolbox.com/tag/css target="_blank" rel="nofollow">html>
<head>
<link rel="stylesheet" href="css/reveal.css">
<link rel="stylesheet" href="css/theme/black.css">
<style>
@media print {
section {
page-break-after: always;
}
}
</style>
</head>
<body>
<div class="reveal">
<div class="slides">
<section>第一张幻灯片的内容</section>
<section>第二张幻灯片的内容</section>
<section>第三张幻灯片的内容</section>
</div>
</div>
<script src="js/reveal.js"></script>
<script>
Reveal.initialize();
</script>
</body>
</html>
在上面的示例中，我们通过添加自定义的CSS规则，为每个节选添加了page-break-after: always;属性。这样，在打印或保存为PDF时，每个节选都会被正确地分页打印。
总结
通过修改CSS的分页规则或直接修改reveal.js的源代码，我们可以解决使用CSS reveal.js打印PDF时只打印第一张幻灯片的问题。通过添加自定义的CSS规则，我们可以控制分页行为，为每个节选添加适当的分页符。而直接修改reveal.js的源代码则可以更细致地控制分页效果。无论采取哪种方法，我们都可以确保在打印或保存为PDF时，幻灯片的每个节选都能被正确地分页打印。
此处评论已关闭