将 Starlight 转换为 PDF:经验和见解
来源:dev.to
时间:2025-01-15 23:00:50 410浏览 收藏
哈喽!大家好,很高兴又见面了,我是golang学习网的一名作者,今天由我给大家带来一篇《将 Starlight 转换为 PDF:经验和见解》,本文主要会讲到等等知识点,希望大家一起学习进步,也欢迎大家关注、点赞、收藏、转发! 下面就一起来看看吧!
想象一下您收到一项任务:在一周内创建一个新的文档网站。它应该具有视觉吸引力、快速且易于导航。您会收到一堆 *.docs 文件、图像和屏幕截图,以及“完成它”.
的说明有很多优秀的工具可供选择,例如docusaurus、nextra、vitepress、docus等等。之前,我在使用 starlight 构建文档网站方面获得了丰富的经验,因此我选择了它来完成这项任务。然而,我发现了一个缺失的功能:从文档生成 pdf 的能力。这是要求之一。 “听起来像是一个不错的副业项目,”我自己想的。
解决任务
起初,这似乎很简单:获取页面,解析 html,对内容进行分组,瞧!
星光驱动的网站有一个“下一步”按钮来浏览文档。由于 pdf 本质上是页面数组,因此使用“下一步”按钮逐一解析它们似乎是合乎逻辑的。由于网站生成静态页面,我很快编写了一个脚本来获取 html、查询必要的部分,并将所有内容组合在一起。然而,事实证明,生成保留网站样式的 pdf 更为复杂。经过一番头脑风暴,我意识到 puppeteer 是最好的解决方案。
现在流程变得清晰了:
- 确定起始页面。这是带有“下一步”按钮的第一页。
- 浏览页面。从每个页面提取标题和主要内容,同时构建目录。
- 合并内容。添加分页符和其他样式。
- 准备最终的 html。 使用生成的 html 重写初始页面的 。
- 加载资源。滚动页面至底部加载所有图片。
- 生成 pdf。puppeteer 的 page.pdf() 方法可以解决这个问题。
- 完成!
这就是starlight-to-pdf 的工作原理。遵循这种模式,您可以为缺乏 pdf 导出功能的其他文档框架构建类似的工具。
后续步骤
基本功能准备就绪后,就该添加一些额外功能了。以下是最有趣和最具挑战性的功能。
添加页眉和页脚
页眉或页脚中包含页码和一些附加信息是很好的。 puppeteer 的 page.pdf() 方法接受 headertemplate 和 footertemplate 选项。这些选项接受 html 字符串。 puppeteer 自动将值注入到具有特定实用程序类的元素中:
- .date:格式化日期;
-
.title:网页的
标签值; - .url: 调用打印函数的页面 url;
- .pagenumber:当前页码;
- .totalpages: 文档的总页数。
当我们在打印之前将所有内容合并在一页上时,标题和网址对我们来说没有太大价值:插入的值将始终保持不变。然而,其他课程有很大帮助。这是页脚模板示例:
要使用此功能,请不要忘记将 displayheaderfooter 属性设置为 true:
import puppeteer from 'puppeteer'; const browser = await puppeteer.launch(); const page = await browser.newpage(); await page.goto('https://someurl'); const footertemplatestr = '