revealjs把某几页ppt转成pdf

0.前言

使用markdown方式生成的ppt，虽然revealjs提供了print-pdf这个方法，但是我这边的需求是，把访问过的那几页ppt生成为pdf。

1.revealjs前置知识

1）如何获取当前ppt索引

//获取当前ppt索引
var indices = Reveal.getIndices();
console.log('当前幻灯片的水平索引(h):', indices.h);
console.log('当前幻灯片的垂直索引(v):', indices.v);

2）如何跳转某个页面

Reveal.slide( indexh, indexv, indexf );

2.实现逻辑

其实就是记录访问过的索引，通过slide跳转拿到页面内容，通过canvas生成图片，jsPDF生成pdf。

3.代码如下

           // Set：存储访问过的页面index，确保唯一性
			var visitedIndices = new Set();

			Reveal.addEventListener('slidechanged', function(event) {
				var indices = Reveal.getIndices();
				console.log('当前幻灯片的水平索引(h):', indices.h);
				console.log('当前幻灯片的垂直索引(v):', indices.v);
				var indexPair = indices.h + ',' + indices.v; 
				// 访问过的页面就存到 Set 中
				visitedIndices.add((indexPair));

				// 打印已访问页面的 indices 数组
				console.log("Visited indices:", Array.from(visitedIndices));
			});

			
			
			document.getElementById('generate-pdf').addEventListener('click', function() {
				// 创建一个新的 jsPDF 实例
				var doc = new window.jspdf.jsPDF('l', 'px', [Reveal.getConfig().width, Reveal.getConfig().height]);

				// 获取 visitedIndices 数组
				var indices = Array.from(visitedIndices);

				// 定义生成 PDF 的函数
				function generatePDF(index) {
					
					// 如果所有页面都处理完毕，则保存 PDF 文件
					if (index >= indices.length) {
						console.log("end!")
						doc.save('presentation.pdf');
						return;
					}
					var indexH = indices[index].split(',')[0];
					var indexV = indices[index].split(',')[1];
					// 通过 Reveal.slide 方法访问特定的页面
					Reveal.slide(indexH, indexV);

				

					// 等待幻灯片加载完成后，再生成 PDF
					setTimeout(() => {
						// 使用 html2canvas 将当前页面转换为 canvas
						html2canvas(document.querySelector('.slides'), { 
						    scale: 2,
						    // 使用页面的背景颜色
						    backgroundColor: window.getComputedStyle(document.body).backgroundColor 
						 }).then(canvas => {
							// 将 canvas 转换为图像，并添加到 PDF 中
							doc.addImage(canvas.toDataURL('image/jpeg', 1.0), 'JPEG', 0, 0, Reveal.getConfig().width, Reveal.getConfig().height);

							// 如果不是最后一页，则添加一个新页面
							if (index !== indices.length - 1) {
								doc.addPage();
							}

							// 递归调用生成下一页的 PDF
							generatePDF(index + 1);
						});
					});
				}

				// 开始生成 PDF
				generatePDF(0);
			});