BentoPDF 单页拼接Combine to Single Page原理与实战把多页 PDF 无缝缝合为一张连续长页【免费下载链接】bentopdfThe Privacy First PDF Toolkit项目地址: https://gitcode.com/gh_mirrors/be/bentopdf将 PDF 的每一页按顺序拼接到一张超长或超宽的连续页面上是制作网页滚动预览、设计线框总览、连环漫画长条图与分镜脚本时的常见需求。BentoPDF 的Combine to Single Page工具以纯前端方式实现这一能力文件全程不离开浏览器即可把多页 PDF 缝合为垂直滚动或水平并排的单页 PDF。读完本文你将掌握该工具的全部配置项与操作流程并通过源码级剖析理解其渲染管线、尺寸计算与分隔线绘制原理同时了解它在 BentoPDF 多工具工作流Workflow中的复用形态。功能概览与适用场景Combine to Single Page 的核心能力是把一个多页 PDF 的所有页面合并为一个连续的输出页面垂直拼接页面按原顺序自上而下堆叠形成类似长卷轴scroll的单页水平拼接页面按原顺序从左到右并排形成横向长条可配置页面间距在相邻页面之间插入指定大小的间隙背景色拾取为页面之间的空隙区域填充自定义颜色可选分隔线在页面交界处绘制细线并独立控制其粗细与颜色全分辨率渲染每个原始页面都以 2 倍缩放渲染到画布再嵌入新页面最大限度保留清晰度。该工具典型的使用场景包括把多页线框稿或设计稿拼接成一张长图用于整体评审生成连续可滚动的文档视图方便嵌入网页展示将多页漫画或分镜板缝合为一条长条图按顺序排列页面形成全景式预览便于快速通读。操作流程从上传到下载工具页面的交互流程非常直接页面位于 src/pages/combine-single-page.html交互逻辑在 src/js/logic/combine-single-page-page.ts上传 PDF点击上传区域选择文件或将 PDF 拖入虚线框。file-input的acceptapplication/pdf以及拖放监听中的 MIME 类型与扩展名双重校验file.type application/pdf || file.name.toLowerCase().endsWith(.pdf)保证只接受 PDF。文件选中后页面会通过 loadPdfWithPasswordPrompt 处理加密文档——遇到带密码的 PDF 会先弹出密码输入框。选择布局方向Layout Direction下拉框默认Vertical (Top to Bottom)可选Horizontal (Left to Right)。设置页面间距Spacing数字输入框默认0最小值0。注意该值直接以 PDF 内部单位点point写入新页面72 点等于 1 英寸源码中parseInt(...) || 0会在输入为空或非法时回退为 0。选择背景色Background Color颜色选择器默认#FFFFFF白色。可选开启分隔线勾选Add Separator Lines后才会显示分隔线参数区separator-options可设置Separator Thickness默认0.5步进0.5最小值0.5与Separator Color默认#000000黑色。点击 Combine Pages处理完成后自动下载合并后的单页 PDF并弹出成功提示。处理期间加载弹窗会实时显示进度文案如Processing page 3 of 12...方便跟踪长文档的处理进度。参数总览选项说明默认值取值范围/说明Orientation布局方向Vertical上下堆叠或 Horizontal左右并排vertical二选一Page spacing页面间距相邻页面之间的间隙单位为点72 点 1 英寸0非负整数Background color背景色页面间隙及居中留白区域的颜色#FFFFFF任意十六进制颜色Add separator添加分隔线是否在页面交界处绘制细线关闭布尔开关Separator thickness分隔线粗细分隔线宽度单位点0.5≥ 0.5步进 0.5Separator color分隔线颜色分隔线的颜色#000000任意十六进制颜色源码级原理剖析尺寸计算拼接页面的几何模型处理入口是combineToSinglePage()src/js/logic/combine-single-page-page.ts。它先遍历源文档的所有页面收集每个页面的宽高并累计得到maxWidth/maxHeight所有页面中的最大宽、最大高totalWidth/totalHeight所有页面宽、高的总和。随后根据方向确定输出页面尺寸垂直finalWidth maxWidth finalHeight totalHeight (页数 - 1) × spacing 水平finalWidth totalWidth (页数 - 1) × spacing finalHeight maxHeight也就是说垂直拼接时新页面的宽度取所有页面的最大宽度高度为所有页面高度之和加上所有间隙水平拼接时反之高度取最大高度宽度为所有页面宽度之和加间隙。单页文档页数 - 1 0不会产生额外间隙公式中的Math.max(0, sourcePages.length - 1)保证了这一点。最终通过newDoc.addPage([finalWidth, finalHeight])创建一个超长或超宽的单页。渲染管线2 倍缩放的光栅化嵌入拼接不是简单拷贝 PDF 内部对象而是把每一页渲染成位图再嵌入新页面核心步骤如下用 pdf.js 打开源文档getPDFDocument({ data: pdfBytes }).promise对第 i 页调用page.getViewport({ scale: 2.0 })以2 倍缩放创建视口在内存 canvas 上执行page.render({ canvasContext, viewport, canvas })把页面光栅化通过canvas.toDataURL(image/png)得到 PNG 数据再用newDoc.embedPng()嵌入由 pdf-lib 创建的新文档依据方向把图片绘制到拼接页面的对应坐标。2 倍缩放意味着输出页面的内容分辨率高于原始矢量坐标这是以全分辨率渲染每个原始页面这一特性的实现基础。需要特别说明拼接结果是一张图片式的 PDF页面中的文字不再可选中、不可搜索。页面 FAQ 也明确提示如果需要复制或搜索文本请保留原始 PDF。对齐与居中策略垂直布局下宽度不足最大宽度的页面会被水平居中x (finalWidth - width) / 2页面顶部依次递减高度堆叠currentY - height水平布局下高度不足最大高度的页面会被垂直居中y (finalHeight - height) / 2页面从左到右依次排列currentX width。这解释了 FAQ 中输出宽度匹配最宽的源页面较窄页面居中的描述。背景色与分隔线背景色页面逻辑中仅当所选颜色不是白色backgroundColorHex.toUpperCase() ! #FFFFFF时才在拼接页面上先绘制一个覆盖全页的矩形因此白色默认时不绘制任何填充等同透明处理。背景会铺满整个输出页面所以它不仅填充页面之间的间隙也会出现在较窄页面居中后的两侧留白处。颜色通过 hexToRgb 转为 0–1 的 RGB 分量后交给 pdf-lib 的rgb()使用。分隔线仅当开启且当前页不是最后一页时绘制。垂直布局在lineY currentY - spacing / 2处画一条贯穿全宽的横线水平布局在lineX currentX width spacing / 2处画一条贯穿全高的竖线线条恰好位于页面间隙的正中央。粗细与颜色分别来自separator-thickness与separator-color输入。状态管理与异常处理页面状态由CombineSinglePageState接口管理src/js/types/combine-single-page-type.ts仅保存file: File | null与pdfDoc: PDFLibDocument | null两个字段。resetState()在移除文件、处理失败或成功后清空状态并隐藏选项区。单页渲染失败会被捕获并console.warn后跳过Failed to render page N不会中断整体流程最终下载仍沿用源文件名通过downloadFile()以application/pdf类型的 Blob 触发保存。多工具工作流中的复用除了独立工具页面Combine to Single Page 还被封装为可视化工作流PDF Workflow中的一个节点CombineSinglePageNode注册于 src/js/workflow/nodes/registry.ts归类为Organize Manage类别。它提供pdf输入/输出 socket 以及六个控制项orientation、spacing、backgroundColor、separator、separatorThickness、separatorColor默认值与独立页面一致vertical、0、#ffffff、false、0.5、#000000实现逻辑与页面版几乎同构同样以 2 倍缩放渲染每页为 PNG 并嵌入新文档同样按方向累计偏移绘制图片与分隔线。差异在于它通过processBatch支持批量输入并能为每个输入生成独立输出输出文件名统一追加_combined后缀input.filename.replace(/\.pdf$/i, _combined.pdf)无论背景色是否为白色都会绘制背景矩形页面版对白色做了跳过优化在网页版 UI 中通过 src/js/config/tools.ts 注册为combine-single-page.html工具入口。这意味着 Combine to Single Page 既能作为独立工具一键使用也能作为工作流节点与合并、拆分等节点串联实现更复杂的 PDF 处理管道。实用建议与注意事项方向选择纵向Portrait页面居多的文档适合垂直拼接横向Landscape内容则更适合水平并排避免产生过宽的空白边。警惕超大页面输出页面的尺寸会随页数线性增长——100 页的文档会生成约 100 页高的单页。部分 PDF 阅读器对超大页面支持有限例如 Adobe Reader 不显示单边超过 200 英寸的页面。处理大量页面时请评估目标阅读器的限制。善用对比色分隔线开启分隔线并选择与背景反差明显的颜色可以清晰标示每个原始页面的边界便于快速定位页与页的切换位置。间距单位换算Spacing 以点为单位72 点 1 英寸若需要约 1 厘米的间隙可填入约 28 点。文本不可选由于输出为光栅化图片无法复制或搜索文字需要保留可编辑文本时请保留原文件。相关工具N-Up PDF 拼接把多页排版到一张纸上网格布局适合打印场景Merge PDF 合并将多个 PDF 合并为一个多页文档而非拼接为单页Divide Pages 拆分页面与拼接相反的页面拆分能力。三者与 Combine to Single Page 共同构成 BentoPDF 在页面组织维度上的完整工具链可按需组合使用。【免费下载链接】bentopdfThe Privacy First PDF Toolkit项目地址: https://gitcode.com/gh_mirrors/be/bentopdf创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考