@spacecorexdev/core 0.0.4 → 0.0.5

package/src/ui/UIFilePreview/MarkdownEditor/exportMarkdownPdf.ts

@@ -0,0 +1,576 @@
+import type EasyMDE from 'easymde';
+import { buildPageSlices, measureBlocks } from '../pdfPagination';
+
+/**
+ * Markdown 导出 PDF（纯前端生成，不经过浏览器打印对话框）。
+ *
+ * 实现思路：
+ * 1. 复用 EasyMDE 的 previewRender(marked) 把 Markdown 渲染成与预览一致的 HTML；
+ * 2. 放入离屏容器（.EasyMDEContainer .editor-preview），强制使用浅色主题变量，
+ *    导出排版与编辑器预览保持 1:1；
+ * 3. 按 A4 内容区高度对容器分块截图，规避浏览器单 canvas ~16384px 的高度上限，
+ *    同时天然完成分页；
+ * 4. 逐块写入 jsPDF（A4），最后直接触发下载。
+ */
+
+export interface ExportMarkdownPdfOptions {
+  /** 最新的 Markdown 原文 */
+  content: string;
+  /** 文件名（.md/.markdown 后缀会被替换为 .pdf） */
+  fileName: string;
+  /** EasyMDE 实例，用于复用其 previewRender 渲染逻辑 */
+  editor?: EasyMDE | null;
+  /** 分页进度回调（当前页 / 总页数） */
+  onProgress?: (page: number, total: number) => void;
+}
+
+// A4：210mm x 297mm，四周留白 10mm，内容区 190mm x 277mm
+const PAGE_MARGIN_MM = 10;
+const PAGE_WIDTH_MM = 210;
+const PAGE_HEIGHT_MM = 297;
+const CONTENT_WIDTH_MM = PAGE_WIDTH_MM - PAGE_MARGIN_MM * 2; // 190
+const CONTENT_HEIGHT_MM = PAGE_HEIGHT_MM - PAGE_MARGIN_MM * 2; // 277
+// 内容区 CSS 像素宽度（96dpi），离屏容器按此固定宽度排版
+const CONTENT_WIDTH_PX = Math.round((CONTENT_WIDTH_MM / 25.4) * 96); // 718
+const CONTENT_HEIGHT_PX = (CONTENT_WIDTH_PX * CONTENT_HEIGHT_MM) / CONTENT_WIDTH_MM;
+// 截图倍率，保证 PDF 清晰度（3 倍使删除线等细线在 PDF 渲染器降采样后仍可见）
+const SCALE = 3;
+// 图片加载最长等待时间（ms），避免外链图失效时永久阻塞导出
+const IMAGE_WAIT_TIMEOUT = 15000;
+
+/** 浅色主题变量（取自 src/styles/index.css 的 :root 浅色值），保证暗色模式下导出仍是白底黑字 */
+const LIGHT_THEME_VARS: Record<string, string> = {
+  '--color-surface': '255 255 255',
+  '--color-foreground': '31 41 55',
+  '--color-muted': '107 114 128',
+  '--color-border': '229 231 235',
+  '--color-markdown-comment': '133 133 133',
+  '--color-gray-50': '249 250 251',
+  '--color-gray-100': '243 244 246',
+  '--color-gray-200': '229 231 235',
+  '--color-gray-300': '209 213 219',
+  '--color-gray-400': '156 163 175',
+  '--color-green-500': '34 197 94',
+};
+
+const escapeHtml = (text: string): string =>
+  text
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;');
+
+/** EasyMDE 的类型声明未公开 options/markdown，但运行时存在 */
+interface EasyMdeLike {
+  /** 原型方法：内部按 options.renderingConfig 配置 marked 后渲染，与编辑器实时预览同源 */
+  markdown?: (text: string) => string;
+  options?: {
+    /**
+     * 默认实现为 function(text) { return this.parent.markdown(text) }，
+     * 调用时 this 必须是 options（this.parent 才是编辑器实例）
+     */
+    previewRender?: (markdown: string, previewElement?: HTMLElement) => string | void | null;
+  };
+}
+
+const asEasyMdeLike = (editor?: EasyMDE | null): EasyMdeLike | null =>
+  (editor as unknown as EasyMdeLike) || null;
+
+/** EasyMDE 的 markdown() 返回值可能被 <html><head>...<body> 包裹，剥掉外壳只留正文节点 */
+const unwrapDocumentEnvelope = (html: string): string =>
+  html
+    .replace(/^\s*<html[^>]*>/i, '')
+    .replace(/<\/html>\s*$/i, '')
+    .replace(/^\s*<head[^>]*>[\s\S]*?<\/head>/i, '')
+    .replace(/^\s*<body[^>]*>/i, '')
+    .replace(/<\/body>\s*$/i, '')
+    .trim();
+
+/** 复用 EasyMDE 的渲染链路把 Markdown 转为 HTML；实例不可用时降级为纯文本 */
+const renderMarkdownHtml = (content: string, editor?: EasyMDE | null): string => {
+  const mde = asEasyMdeLike(editor);
+
+  // 首选：实例原型方法 markdown()，与编辑器实时预览使用同一套 marked 配置，
+  // 且不依赖 options.parent 的 this 绑定
+  if (mde && typeof mde.markdown === 'function') {
+    try {
+      const html = unwrapDocumentEnvelope(mde.markdown(content));
+      if (html) {
+        return html;
+      }
+    } catch (error) {
+      console.warn('[exportMarkdownPdf] EasyMDE markdown() 渲染失败，尝试 previewRender:', error);
+    }
+  }
+
+  // 次选：previewRender。注意默认函数内部用 this.parent.markdown()，
+  // this 必须绑定为 options 对象
+  const options = mde?.options;
+  const previewRender = options?.previewRender;
+  if (options && typeof previewRender === 'function') {
+    const probe = document.createElement('div');
+    try {
+      const result = previewRender.call(options, content, probe);
+      const html = unwrapDocumentEnvelope(
+        typeof result === 'string' && result ? result : probe.innerHTML,
+      );
+      if (html) {
+        return html;
+      }
+    } catch (error) {
+      console.warn('[exportMarkdownPdf] EasyMDE previewRender 渲染失败，降级为纯文本:', error);
+    }
+  }
+
+  return `<pre style="white-space:pre-wrap;font-size:16px;line-height:1.6;">${escapeHtml(content)}</pre>`;
+};
+
+/** 等待容器内图片全部加载完成（设置 crossOrigin 以支持跨域图片入 canvas） */
+const waitForImagesLoaded = (root: HTMLElement): Promise<void> => {
+  const images = Array.from(root.querySelectorAll('img'));
+  if (images.length === 0) {
+    return Promise.resolve();
+  }
+  const tasks = images.map((img) =>
+    new Promise<void>((resolve) => {
+      let settled = false;
+      const finish = () => {
+        if (settled) return;
+        settled = true;
+        window.clearTimeout(timer);
+        img.removeEventListener('load', onLoad);
+        img.removeEventListener('error', onError);
+        // 图片加载失败不阻塞导出，html2canvas 内部会再次尝试 CORS 抓取
+        resolve();
+      };
+      const timer = window.setTimeout(finish, IMAGE_WAIT_TIMEOUT);
+      const onLoad = () => finish();
+      const onError = () => finish();
+      img.addEventListener('load', onLoad);
+      img.addEventListener('error', onError);
+      // crossOrigin 必须在发起请求前设置；重置 src 触发一次带 CORS 的请求
+      const rawSrc = img.getAttribute('src');
+      img.crossOrigin = 'anonymous';
+      img.removeAttribute('src');
+      if (rawSrc) {
+        img.setAttribute('src', rawSrc);
+      }
+      // 重置后恰好已命中缓存
+      if (img.complete) {
+        finish();
+      }
+    }),
+  );
+  return Promise.all(tasks).then(() => undefined);
+};
+
+/**
+ * 导出专用预览样式：全部使用具体色值，不依赖 CSS 变量。
+ *
+ * 原因：
+ * 1. markdownEditor.css 中预览样式大量使用 rgb(var(--color-xxx) / alpha)，
+ *    html2canvas 1.4 无法正确解析这种现代语法，会导致背景/边框丢失（如行内 code 灰底）；
+ * 2. hr 默认的 inset 3D 边框在 html2canvas 中会被渲染成明显的黑线，与预览不一致。
+ *
+ * 这里用 .EasyMDEContainer .editor-preview 作用域 + !important 覆盖原有变量规则，
+ * 保证导出视觉与预览一致。
+ */
+const PREVIEW_EXPORT_STYLES = `
+/* 注意：white-space: pre-wrap 只能作用于子元素（* 选择器），不能加在容器自身——
+   否则 marked 输出 HTML 中块级元素之间的换行符会被渲染成额外空白行（每处约一行高），
+   导致导出 PDF 中标题、分隔线、引用块等前后间距比真实预览大出一截。
+   真实预览容器自身为 white-space: normal，块间换行符直接折叠。 */
+.EasyMDEContainer .editor-preview * {
+  word-wrap: break-word;
+  white-space: pre-wrap;
+  word-break: normal;
+}
+.EasyMDEContainer .editor-preview {
+  color: #1f2937 !important;
+  background: #ffffff !important;
+  font-size: 16px !important;
+  line-height: 1.6 !important;
+}
+.EasyMDEContainer .editor-preview h1,
+.EasyMDEContainer .editor-preview h2,
+.EasyMDEContainer .editor-preview h3,
+.EasyMDEContainer .editor-preview h4,
+.EasyMDEContainer .editor-preview h5,
+.EasyMDEContainer .editor-preview h6 {
+  color: #000 !important;
+}
+
+.EasyMDEContainer .editor-preview h1 {
+  font-size: 200%;
+  line-height: 200%;
+  font-weight: 700;
+  margin-top: 0.5em;
+  margin-bottom: 0em;
+}
+.EasyMDEContainer .editor-preview h2 {
+  font-size: 160%;
+  line-height: 160%;
+  font-weight: 700;
+  margin-top: 0.5em;
+  margin-bottom: 0em;
+}
+.EasyMDEContainer .editor-preview h3 {
+  font-size: 125%;
+  line-height: 125%;
+  font-weight: 700;
+  margin-top: 1em;
+  margin-bottom: 1em;
+}
+.EasyMDEContainer .editor-preview h4,
+.EasyMDEContainer .editor-preview h5,
+.EasyMDEContainer .editor-preview h6 {
+  font-size: 110%;
+  line-height: 110%;
+  font-weight: 700;
+  margin-top: 1em;
+  margin-bottom: 1em;
+}
+
+.EasyMDEContainer .editor-preview p {
+  white-space: pre-wrap;
+  word-wrap: break-word;
+  margin: 0 0 1em;
+  line-height: 1.6;
+}
+/* 注意：标题（h1-h6）、段落的字号/行高/上下 margin 不在此重复声明，
+   统一由 markdownEditor.css 的同名规则生效（离屏容器同样带 .EasyMDEContainer 作用域），
+   避免两处值漂移导致导出与预览间距不一致。 */
+/* 行内代码：用具体色值，避免 var() 解析失败
+   line-height:1 让盒高=文字高度，避免 html2canvas 把背景画偏（偏上） */
+.EasyMDEContainer .editor-preview code {
+  background: rgba(133, 133, 133, 0.3) !important;
+  border-radius: 2px !important;
+  padding: 1px 2px !important;
+  color: #1f2937 !important;
+  line-height: 1 !important;
+  vertical-align: baseline !important;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+}
+/* 修复 html2canvas 1.4 的 FontMetrics 测量环境（关键：影响所有文字的纵向绘制位置）。
+   html2canvas 用 textBounds.top + FontMetrics.baseline 以 alphabetic 基线画文字，
+   而 FontMetrics.parseMetrics 在【当前页面 document.body】下创建一个隐藏 div，
+   内部用 1x1 img(vertical-align:baseline) 与文字 span 的 offsetTop 差来推算基线。
+   Tailwind preflight 的 img{display:block} 会让该测试 img 掉出文字行盒、独占一块，
+   使 baseline 从 ~16 膨胀到 ~23（middle 同样失真），导致所有文字被系统性下画 ~6.7px：
+   删除线偏上、code 灰底偏上、表格单元格文字偏下，均为同一根因。
+   该测试 img 的特征：body 直属子 div 下的 1x1 img，用此精准选择器恢复 inline，
+   不影响正文图片（正文 img 位于 .editor-preview 内部更深层级）。
+   注意不能设 vertical-align：!important 会覆盖 parseMetrics 内联的 baseline/super。 */
+body > div > img[width="1"][height="1"] {
+  display: inline !important;
+}
+/* 删除线：html2canvas 1.4 对 text-decoration:line-through 的位置计算有 bug
+   （用 vertical-align:super 近似出的 middle 画线，且 middle 测量同样受上述
+   FontMetrics 环境影响失真），改用显式色值的 linear-gradient 背景画横线。注意：
+   1. 必须用具体色值，不能用 currentColor；不要覆盖 line-height；
+   2. 百分比基于修复 FontMetrics 后的文字真实位置校准：渐变参考系是 del 元素
+      盒（getBoundingClientRect，高 18px），正文文字视觉中线约在盒高 54% 处，
+      52%-57% 色带（约 1px 粗）在正文/列表/行内代码/标题中偏差均 ≤0.5px。 */
+.EasyMDEContainer .editor-preview del,
+.EasyMDEContainer .editor-preview s,
+.EasyMDEContainer .editor-preview strike {
+  text-decoration: none !important;
+  background-image: linear-gradient(
+    to bottom,
+    transparent 52%,
+    #1f2937 52%,
+    #1f2937 57%,
+    transparent 57%
+  ) !important;
+  background-repeat: no-repeat !important;
+}
+/* 代码块 */
+/* 上 1em（浏览器默认）、下 10px，与 markdownEditor.css 的 pre 规则一致 */
+.EasyMDEContainer .editor-preview pre {
+  background: #f3f4f6 !important;
+  padding: 10px !important;
+  margin: 1em 0 10px !important;
+  border-radius: 4px;
+  overflow-x: auto;
+}
+.EasyMDEContainer .editor-preview pre code {
+  background: transparent !important;
+  padding: 0 !important;
+  border-radius: 0 !important;
+}
+/* 引用块 */
+.EasyMDEContainer .editor-preview blockquote {
+  border-left: 2px solid #22c55e !important;
+  color: #858585;
+  margin: 1.5em 0 !important;
+  padding: 0 1em !important;
+  display: block;
+  white-space: normal;
+  word-wrap: normal;
+  word-break: normal;
+}
+/* 列表：关闭浏览器/ html2canvas 原生标记。
+   html2canvas 1.4 自绘的列表标记用 lineHeight/2 的固定公式定位纵向位置，
+   与正文真实基线不一致（line-height:1.6 时有序序号整体偏上约 1/3 em）。
+   标记改由 onclone 中注入的 inline-block span 承担（见 injectListMarkers），
+   与正文处于同一行盒，基线天然对齐；2em 左内边距即标记占位槽。 */
+.EasyMDEContainer .editor-preview ul,
+.EasyMDEContainer .editor-preview ol,
+.EasyMDEContainer .editor-preview li {
+  word-wrap: normal;
+  white-space: normal;
+  word-break: normal;
+  list-style: none !important;
+  margin: revert;
+  padding: revert;
+}
+.EasyMDEContainer .editor-preview ul,
+.EasyMDEContainer .editor-preview ol {
+  padding-left: 2em;
+}
+/* 表格 */
+.EasyMDEContainer .editor-preview table {
+  border-collapse: collapse;
+  margin: 1em 0;
+}
+.EasyMDEContainer .editor-preview table td,
+.EasyMDEContainer .editor-preview table th {
+  border: 1px solid #e5e7eb !important;
+  padding: 5px !important;
+}
+.EasyMDEContainer .editor-preview table th {
+  background: #f9fafb;
+  font-weight: 700;
+}
+/* 分隔线：显式 solid 浅灰，避免 inset 被 html2canvas 渲染成黑线 */
+.EasyMDEContainer .editor-preview hr {
+  border: none !important;
+  border-top: 1px solid #d1d5db !important;
+  height: 0 !important;
+  /* 与 markdownEditor.css 的 hr 上下 1em 一致 */
+  margin: 1em 0 !important;
+  background: transparent !important;
+}
+.EasyMDEContainer .editor-preview img {
+  max-width: 100%;
+  height: auto;
+}
+.EasyMDEContainer .editor-preview a {
+  color: #2563eb;
+  text-decoration: underline;
+}
+`;
+
+const buildOffscreenContainer = (html: string): HTMLElement => {
+  // 外层带 .EasyMDEContainer，使 markdownEditor.css 中以其为作用域的预览样式生效
+  const wrapper = document.createElement('div');
+  wrapper.className = 'EasyMDEContainer';
+  // 页面上可能同时存在真实编辑器的 .EasyMDEContainer，onclone 中靠此属性定位离屏容器
+  wrapper.setAttribute('data-md-export-root', 'true');
+  Object.entries(LIGHT_THEME_VARS).forEach(([key, value]) => {
+    wrapper.style.setProperty(key, value);
+  });
+  Object.assign(wrapper.style, {
+    position: 'fixed',
+    top: '0',
+    left: '-100000px',
+    width: `${CONTENT_WIDTH_PX}px`,
+    background: '#ffffff',
+    pointerEvents: 'none',
+  } as Partial<CSSStyleDeclaration>);
+
+  // 注入自包含预览样式（具体色值，不依赖 CSS 变量），覆盖原有变量规则
+  const styleEl = document.createElement('style');
+  styleEl.setAttribute('data-md-export', 'true');
+  styleEl.textContent = PREVIEW_EXPORT_STYLES;
+  wrapper.appendChild(styleEl);
+
+  // 内层即“预览区”，复用 .editor-preview 的全部样式（标题/代码/表格/引用等）
+  const preview = document.createElement('div');
+  preview.className = 'editor-preview editor-preview-full';
+  Object.assign(preview.style, {
+    display: 'block',
+    position: 'static',
+    width: `${CONTENT_WIDTH_PX}px`,
+    height: 'auto',
+    minHeight: 'auto',
+    margin: '0',
+    padding: '0',
+    overflow: 'visible',
+    zIndex: 'auto',
+    background: '#ffffff',
+    color: '#1f2937',
+    fontSize: '16px',
+    lineHeight: '1.6',
+    fontFamily:
+      '-apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif',
+  } as Partial<CSSStyleDeclaration>);
+  preview.innerHTML = html;
+
+  wrapper.appendChild(preview);
+  document.body.appendChild(wrapper);
+  return preview;
+};
+
+/**
+ * 在 html2canvas 的克隆文档中把原生列表标记替换为插入 li 开头的 inline-block span。
+ *
+ * 背景：html2canvas 1.4 对 list-style:decimal/disc 的标记是自己用 canvas 文字绘制的，
+ * 纵向位置取 li.bounds.top + lineHeight/2 的固定公式（见其 renderer 中 paint.listValue 分支），
+ * 与正文按浏览器真实行盒排版的基线不是同一套计算，line-height 1.6 下有序序号会整体偏上。
+ * 改为普通行内元素后，标记与正文处于同一个行盒，基线天然一致（且由浏览器直接布局、html2canvas 只负责绘制）。
+ * 仅操作克隆文档，不影响页面上真实的编辑器预览。
+ */
+const injectListMarkers = (root: ParentNode, doc: Document): void => {
+  // 负左外边距把标记拉进 ul/ol 的 2em 左内边距槽位；换行的后续行仍与首行正文对齐。
+  // 不写 font/color：span 作为普通行内元素自然继承 li 的字体与颜色
+  const MARKER_STYLE =
+    'display:inline-block;width:1.6em;margin-left:-2em;padding-right:0.4em;' +
+    'text-align:right;white-space:nowrap;';
+
+  const inject = (list: Element, textFor: (index: number) => string): void => {
+    const start = Number((list as HTMLElement).getAttribute?.('start') ?? '1');
+    let index = Number.isFinite(start) && start >= 1 ? Math.floor(start) : 1;
+    // 只处理直接子 li；嵌套列表独立计数
+    list.querySelectorAll(':scope > li').forEach((li) => {
+      if (
+        li.querySelector(
+          ':scope > [data-md-list-marker], :scope > p > [data-md-list-marker]',
+        )
+      ) {
+        index += 1;
+        return;
+      }
+      const marker = doc.createElement('span');
+      marker.setAttribute('data-md-list-marker', 'true');
+      marker.style.cssText = MARKER_STYLE;
+      marker.textContent = textFor(index);
+      // 松散列表（项之间有空行）EasyMDE 会渲染成 li>p，直接插到 li 下标记会独占一行
+      const first = li.firstElementChild;
+      const target = first && first.tagName === 'P' ? first : li;
+      target.insertBefore(marker, target.firstChild);
+      index += 1;
+    });
+  };
+
+  root.querySelectorAll('ol').forEach((ol) => inject(ol, (i) => `${i}.`));
+  root.querySelectorAll('ul').forEach((ul) => inject(ul, () => '•'));
+};
+
+const toPdfFileName = (fileName: string): string => {
+  const base = fileName.replace(/\.(md|markdown)$/i, '').trim() || 'document';
+  return `${base}.pdf`;
+};
+
+/**
+ * 将 Markdown 内容导出为 PDF 并触发浏览器下载。
+ * @throws 导出失败时抛出异常，由调用方提示用户
+ */
+export const exportMarkdownPdf = async (
+  options: ExportMarkdownPdfOptions,
+): Promise<void> => {
+  const { content, fileName, editor, onProgress } = options;
+  if (!content || !content.trim()) {
+    throw new Error('内容为空，无法导出 PDF');
+  }
+
+  const html = renderMarkdownHtml(content, editor);
+  const preview = buildOffscreenContainer(html);
+
+  try {
+    // 等字体和图片就绪，避免截图时出现回退字体或图片高度未撑开
+    if (document.fonts?.ready) {
+      await document.fonts.ready.catch(() => undefined);
+    }
+    await waitForImagesLoaded(preview);
+
+    // 双 raf 确保最终布局（图片尺寸、换行）生效
+    await new Promise<void>((resolve) =>
+      requestAnimationFrame(() => requestAnimationFrame(() => resolve())),
+    );
+
+    // 预览区顶层内容块（标题/段落/列表/代码块等）作为分页单位
+    const blockElements = Array.from(preview.children);
+    const slices = buildPageSlices(measureBlocks(preview, blockElements), CONTENT_HEIGHT_PX);
+    if (slices.length === 0) {
+      throw new Error('内容为空，无法导出 PDF');
+    }
+
+    // 依赖体积较大，按需动态加载，不进入主包
+    const [{ default: html2canvas }, { jsPDF }] = await Promise.all([
+      import('html2canvas'),
+      import('jspdf'),
+    ]);
+
+    const doc = new jsPDF({
+      orientation: 'portrait',
+      unit: 'mm',
+      format: 'a4',
+      compress: true,
+    });
+
+    // 注：html2canvas 1.4 的 Options 类型把大量字段声明为必填，
+    // 这里不显式标注，交由 html2canvas 调用处检查（y/height 在每次调用时补齐）
+    const baseCanvasOptions = {
+      scale: SCALE,
+      x: 0,
+      width: CONTENT_WIDTH_PX,
+      backgroundColor: '#ffffff',
+      useCORS: true,
+      logging: false,
+      // html2canvas 1.4 的类型声明要求显式提供窗口参数
+      scrollX: window.scrollX,
+      scrollY: window.scrollY,
+      windowWidth: document.documentElement.clientWidth,
+      windowHeight: document.documentElement.clientHeight,
+      // 与离屏容器保持一致的浅色变量，克隆节点渲染时同样生效
+      onclone: (clonedDoc: Document) => {
+        const cloned = clonedDoc.querySelector(
+          '.EasyMDEContainer[data-md-export-root]',
+        ) as HTMLElement | null;
+        if (cloned) {
+          Object.entries(LIGHT_THEME_VARS).forEach(([key, value]) => {
+            cloned.style.setProperty(key, value);
+          });
+          const clonedPreview = cloned.querySelector('.editor-preview');
+          if (clonedPreview) {
+            injectListMarkers(clonedPreview, clonedDoc);
+          }
+        }
+      },
+    };
+
+    for (let page = 0; page < slices.length; page++) {
+      const slice = slices[page];
+
+      const canvas = await html2canvas(preview, {
+        ...baseCanvasOptions,
+        y: slice.y,
+        height: slice.height,
+      });
+
+      // canvas 像素 -> mm（经 scale 与 96dpi 换算）
+      // 使用 PNG（无损）而非 JPEG：JPEG 压缩会让删除线等 1px 细线在部分 PDF 渲染器中丢失
+      const dataUrl = canvas.toDataURL('image/png');
+      const imgWidthMm = (canvas.width / SCALE / 96) * 25.4;
+      const imgHeightMm = (canvas.height / SCALE / 96) * 25.4;
+      doc.addImage(
+        dataUrl,
+        'PNG',
+        PAGE_MARGIN_MM,
+        PAGE_MARGIN_MM,
+        imgWidthMm,
+        imgHeightMm,
+      );
+
+      onProgress?.(page + 1, slices.length);
+
+      if (page < slices.length - 1) {
+        doc.addPage();
+      }
+    }
+
+    doc.save(toPdfFileName(fileName));
+  } finally {
+    preview.parentElement?.remove();
+  }
+};