Skip to content

Feat/long page export#346

Open
Furinar wants to merge 2 commits into
JOYCEQL:mainfrom
Furinar:feat/long-page-export
Open

Feat/long page export#346
Furinar wants to merge 2 commits into
JOYCEQL:mainfrom
Furinar:feat/long-page-export

Conversation

@Furinar

@Furinar Furinar commented May 24, 2026

Copy link
Copy Markdown

作者您好,在面试求职过程中我发现一些问题

  • 简历内容刚好超过标准A4纸一点,导致第二页大量空白
  • 求职过程中可能存在只需要单页pdf或者图片的情况
    综合以上多种原因,我提交了本次pr希望能解决类似问题

Summary

  • 新增长页 PDF 导出:将简历渲染为单页长 PDF,适合不需要分页的场景
  • 新增长图 PNG 导出:将简历渲染为单张长图,适合移动端预览、作品集展示或图片上传场景
  • 新增分页线显示/隐藏切换按钮,长页导出时自动隐藏分页线
  • 导出弹窗中各按钮增加互斥禁用状态,避免并发导出冲突
  • 更新中英文 i18n 翻译,补充所有导出方式的 FAQ 说明

Principle

核心思路是将预览区 DOM 克隆到一个离屏容器中,解除高度约束后渲染为完整长图,再按需输出为 PDF 或 PNG:

  1. 离屏克隆:将 #resume-preview 元素 cloneNode(true),插入一个 position: fixed; left: -10000px 的隐藏容器,避免影响页面可见区域
  2. 解除分页约束:移除克隆元素中的 .page-break-line,并将 min-h-screen、min-h-full 等固定高度样式设为 height: auto,使内容自然撑开为单页
  3. html2canvas 截图:等待图片和字体加载完成后,使用 html2canvas 以 2x 缩放渲染完整 canvas
  4. 输出文件:
    - 长页 PDF:基于 canvas 高度动态计算页面尺寸,创建自定义高度的 jsPDF 单页文档,将 canvas 作为图片写入
    - 长图 PNG:直接通过 canvas.toBlob 导出 PNG 文件

Test plan

  • 在导出弹窗中分别点击"PDF(长页)"和"PNG(长图)",验证文件能正常下载且内容完整
  • 验证导出过程中按钮显示 loading 且其他导出按钮被禁用
  • 点击预览区 Dock 栏的分页线切换按钮,确认分页线可正常显示/隐藏
  • 切换中英文语言,确认新增的导出描述和 toast 提示文案正确显示
  • 在 FAQ 页面确认导出方式说明已更新

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant