@open-file-viewer/core 0.1.11 → 0.1.12

package/README.md

@@ -123,6 +123,44 @@ pdfPlugin({
 This keeps compatibility at the cost of holding one extra copy of the PDF in memory, so use it only
 for affected environments.
 
+## High-Fidelity Office Conversion
+
+Browser-side Office renderers cannot perfectly reproduce Word/WPS layout for files with anchored
+textboxes, absolute positioning, custom fonts, headers/footers or legacy binary formats. For those
+files, configure `officePlugin({ convert })` to send the file to your own LibreOffice, OnlyOffice or
+Microsoft Graph conversion service and return a PDF. The converted PDF is rendered by the built-in
+PDF viewer.
+
+```ts
+officePlugin({
+  pdf: { workerSrc: pdfWorkerSrc },
+  async convert({ file, arrayBuffer, reason }) {
+    const form = new FormData();
+    form.append("file", new Blob([arrayBuffer]), file.name);
+    form.append("reason", reason);
+
+    const response = await fetch("/api/office/convert-to-pdf", {
+      method: "POST",
+      body: form
+    });
+
+    if (!response.ok) {
+      throw new Error("Office conversion failed");
+    }
+
+    return {
+      blob: await response.blob(),
+      fileName: file.name.replace(/\.[^.]+$/, ".pdf"),
+      mimeType: "application/pdf"
+    };
+  }
+});
+```
+
+Open File Viewer does not upload files by default. The conversion hook is only called when you
+explicitly configure it, and currently targets `complex-docx` and `legacy-office` cases. You can also
+return `{ url, fileName, mimeType: "application/pdf" }` when your service stores the converted PDF.
+
 ## CAD Customization
 
 `cadPlugin()` has two CAD preview layers:

package/dist/index.cjs

@@ -5855,7 +5855,7 @@ var officeMimeFormatMap = {
   "application/vnd.oasis.opendocument.presentation-flat-xml": "fodp",
   "application/vnd.apple.keynote": "key"
 };
-function officePlugin() {
+function officePlugin(options = {}) {
   return {
     name: "office",
     match(file) {
@@ -5868,7 +5868,11 @@ function officePlugin() {
       const arrayBuffer = await readArrayBuffer(ctx.file);
       const packageFormat = shouldSniffPackagedOffice(extension) ? await detectPackagedOfficeFormat(arrayBuffer) : void 0;
       let disposeDocxFit;
-      if (packageFormat === "docx" && !fileIsDocx(extension)) {
+      let delegatedInstance;
+      const conversionContext = await createOfficeConversionContext(ctx, arrayBuffer, extension, packageFormat);
+      if (conversionContext && await shouldUseOfficeConversion(options, conversionContext)) {
+        delegatedInstance = await renderConvertedOfficePreview(panel, ctx, options, conversionContext);
+      } else if (packageFormat === "docx" && !fileIsDocx(extension)) {
         disposeDocxFit = await renderDocx(panel, arrayBuffer);
       } else if (packageFormat === "xlsx" && !sheetExtensions.has(extension)) {
         await renderSheet(panel, arrayBuffer, "xlsx");
@@ -5902,12 +5906,13 @@ function officePlugin() {
       ctx.toolbar?.refreshCommandSupport();
       return {
         canCommand(command) {
-          return controller?.canCommand(command) ?? false;
+          return delegatedInstance?.canCommand?.(command) || controller?.canCommand(command) || false;
         },
         command(command) {
-          return controller?.command(command) ?? false;
+          return delegatedInstance?.command?.(command) || controller?.command(command) || false;
         },
         destroy() {
+          delegatedInstance?.destroy();
           controller?.destroy();
           disposeDocxFit?.();
           panel.remove();
@@ -5916,6 +5921,104 @@ function officePlugin() {
     }
   };
 }
+async function createOfficeConversionContext(ctx, arrayBuffer, extension, detectedFormat) {
+  const effectiveFormat = detectedFormat || extension;
+  if ((effectiveFormat === "docx" || fileIsDocx(extension)) && await docxShouldPreferTextboxLayoutFallback(arrayBuffer)) {
+    return { file: ctx.file, arrayBuffer, extension, detectedFormat, reason: "complex-docx" };
+  }
+  if (isLegacyOfficeBinary(extension)) {
+    return { file: ctx.file, arrayBuffer, extension, detectedFormat, reason: "legacy-office" };
+  }
+  return void 0;
+}
+async function shouldUseOfficeConversion(options, context) {
+  if (!options.convert) {
+    return false;
+  }
+  if (typeof options.preferConversion === "function") {
+    return Boolean(await options.preferConversion(context));
+  }
+  if (options.preferConversion !== void 0) {
+    return options.preferConversion;
+  }
+  return context.reason === "complex-docx" || context.reason === "legacy-office";
+}
+async function renderConvertedOfficePreview(panel, ctx, options, conversionContext) {
+  if (!options.convert) {
+    throw new Error("Office conversion handler is not configured.");
+  }
+  const converted = normalizeOfficeConversionResult(await options.convert(conversionContext), ctx.file.name);
+  if (!converted) {
+    throw new Error("Office conversion handler did not return a previewable file.");
+  }
+  if (converted.mimeType !== "application/pdf" && !converted.fileName.toLowerCase().endsWith(".pdf")) {
+    throw new Error("Office conversion handler must return a PDF Blob, ArrayBuffer or URL.");
+  }
+  return renderPdfDocumentPreview({
+    ...options.pdf || {},
+    fileName: converted.fileName,
+    fileUrl: converted.fileUrl,
+    fileSize: converted.fileSize,
+    isExternal: !converted.revokeUrlOnDestroy,
+    viewport: panel,
+    size: ctx.size,
+    fit: ctx.options.fit,
+    toolbar: ctx.toolbar,
+    title: "Office \u9AD8\u4FDD\u771F\u8F6C\u6362\u9884\u89C8",
+    fallbackTitle: "Office \u8F6C\u6362\u540E\u7684 PDF \u65E0\u6CD5\u9884\u89C8",
+    revokeUrlOnDestroy: converted.revokeUrlOnDestroy
+  });
+}
+function normalizeOfficeConversionResult(result, sourceFileName) {
+  if (!result) {
+    return void 0;
+  }
+  const fallbackFileName = `${stripFileExtension(sourceFileName) || "office-preview"}.pdf`;
+  if (typeof result === "string") {
+    return {
+      fileName: fallbackFileName,
+      fileUrl: result,
+      mimeType: "application/pdf",
+      revokeUrlOnDestroy: false
+    };
+  }
+  if (result instanceof ArrayBuffer) {
+    const blob = new Blob([result], { type: "application/pdf" });
+    return createConvertedOfficeBlobPreview(blob, fallbackFileName);
+  }
+  if (result instanceof Blob) {
+    return createConvertedOfficeBlobPreview(result, fallbackFileName);
+  }
+  if (result.url) {
+    return {
+      fileName: result.fileName || fallbackFileName,
+      fileUrl: result.url,
+      mimeType: result.mimeType || "application/pdf",
+      revokeUrlOnDestroy: false
+    };
+  }
+  const data = result.blob || result.data;
+  if (data instanceof ArrayBuffer) {
+    const blob = new Blob([data], { type: result.mimeType || "application/pdf" });
+    return createConvertedOfficeBlobPreview(blob, result.fileName || fallbackFileName);
+  }
+  if (data instanceof Blob) {
+    return createConvertedOfficeBlobPreview(data, result.fileName || fallbackFileName);
+  }
+  return void 0;
+}
+function createConvertedOfficeBlobPreview(blob, fileName) {
+  return {
+    fileName,
+    fileUrl: URL.createObjectURL(blob),
+    fileSize: blob.size,
+    mimeType: blob.type || "application/pdf",
+    revokeUrlOnDestroy: true
+  };
+}
+function stripFileExtension(fileName) {
+  return fileName.replace(/\.[^.]+$/, "");
+}
 function createOfficeZoomController(panel, ctx) {
   const canZoom = Boolean(
     panel.querySelector(".ofv-docx-document, .ofv-sheet, .ofv-pptx-viewer > div, .ofv-document, .ofv-text-block, .ofv-slide")
@@ -6012,7 +6115,7 @@ async function renderDocx(panel, arrayBuffer) {
       useBase64URL: true
     });
     await normalizeDocxLayout(content, arrayBuffer);
-    const shouldUseTextboxFallback = await docxPreviewLooksBlank(content, arrayBuffer) || await docxPreviewMissesRichTextboxContent(content, arrayBuffer);
+    const shouldUseTextboxFallback = await docxPreviewLooksBlank(content, arrayBuffer) || await docxPreviewMissesRichTextboxContent(content, arrayBuffer) || await docxShouldPreferTextboxLayoutFallback(arrayBuffer);
     if (shouldUseTextboxFallback) {
       disposeFit?.();
       styleContainer.remove();
@@ -6095,6 +6198,27 @@ async function docxHasRichTextboxContent(arrayBuffer) {
     return false;
   }
 }
+async function docxShouldPreferTextboxLayoutFallback(arrayBuffer) {
+  try {
+    const zip = await import_jszip3.default.loadAsync(arrayBuffer);
+    const documentXml = await zip.file("word/document.xml")?.async("text");
+    if (!documentXml || !/\btxbxContent\b/.test(documentXml)) {
+      return false;
+    }
+    const blocks = extractDocxTextboxBlocks(documentXml);
+    const meaningfulBlocks = blocks.filter((block) => block.paragraphs.length > 0);
+    const sidebarBackgrounds = blocks.filter(
+      (block) => block.paragraphs.length === 0 && block.fill && block.relativeV === "page" && block.x < 0 && block.width >= 120 && block.height >= 500
+    );
+    const pageAnchoredTextboxes = meaningfulBlocks.filter((block) => block.relativeV === "page");
+    const paragraphAnchoredTextboxes = meaningfulBlocks.filter((block) => block.relativeV !== "page");
+    const leftTextboxes = meaningfulBlocks.filter((block) => block.x < 0);
+    const rightTextboxes = meaningfulBlocks.filter((block) => block.x >= 80);
+    return sidebarBackgrounds.length >= 2 && meaningfulBlocks.length >= 8 && pageAnchoredTextboxes.length >= 4 && paragraphAnchoredTextboxes.length >= 2 && leftTextboxes.length >= 3 && rightTextboxes.length >= 3;
+  } catch {
+    return false;
+  }
+}
 async function renderDocxContentFallback(container, arrayBuffer, options = {}) {
   if (options.showNote !== false) {
     const fallbackNote = document.createElement("div");
@@ -6546,6 +6670,10 @@ function createDocxTextboxBlockElement(block) {
   const paragraphs = normalizeDocxTextboxParagraphOrder(block);
   const [first, ...rest] = paragraphs;
   if (first) {
+    const sectionKind = getDocxTextboxSectionKind(first);
+    if (sectionKind) {
+      section.classList.add(`ofv-docx-textbox-section-${sectionKind}`);
+    }
     const heading = document.createElement("h3");
     heading.textContent = first;
     section.append(heading);
@@ -6558,6 +6686,28 @@ function createDocxTextboxBlockElement(block) {
   }
   return section;
 }
+function getDocxTextboxSectionKind(heading) {
+  const text = normalizePreviewText(heading);
+  if (text.includes("\u6559\u80B2\u80CC\u666F")) {
+    return "education";
+  }
+  if (text.includes("\u4E13\u4E1A\u6280\u80FD")) {
+    return "skills";
+  }
+  if (text.includes("\u5DE5\u4F5C\u7ECF\u5386")) {
+    return "work";
+  }
+  if (text.includes("\u9879\u76EE\u7ECF\u9A8C")) {
+    return "projects";
+  }
+  if (text.includes("\u81EA\u6211\u8BC4\u4EF7")) {
+    return "summary";
+  }
+  if (text.includes("\u57FA\u672C\u4FE1\u606F")) {
+    return "profile";
+  }
+  return "";
+}
 function estimateDocxTextboxBlockHeight(block) {
   return Math.max(block.height, 18 + block.paragraphs.length * 14);
 }
@@ -6601,13 +6751,57 @@ function repairDocxHeadingShapeAlignment(page) {
     if (!svg) {
       continue;
     }
-    const width = parseCssPixelValue(svg.getAttribute("width") || svg.style.width);
+    const width = parseCssPixelValue(svg.style.width) || parseCssPixelValue(svg.getAttribute("width") || "");
     const marginLeft = parseCssPixelValue(svg.style.marginLeft);
     if (width < 300 || marginLeft < 28 || marginLeft > 44) {
       continue;
     }
-    svg.style.marginLeft = "48px";
+    const textWidth = getDocxParagraphVisibleTextWidth(paragraph);
+    svg.style.marginLeft = `${formatCssNumber(Math.max(48, marginLeft + textWidth * 0.68))}pt`;
+    svg.style.marginTop = `${formatCssNumber(parseCssPixelValue(svg.style.marginTop) - 4)}pt`;
+    normalizeDocxHeadingShapeFill(svg);
+    repairDocxHeadingTextBackground(paragraph);
+  }
+}
+function normalizeDocxHeadingShapeFill(svg) {
+  const headingFill = "#3f4aa3";
+  const fillNodes = svg.querySelectorAll("image[fill], rect[data-ofv-docx-shape-fill]");
+  for (const node of fillNodes) {
+    const fill = node.getAttribute("fill") || "";
+    if (fill.toLowerCase() === "#38449a") {
+      node.setAttribute("fill", headingFill);
+    }
+  }
+}
+function repairDocxHeadingTextBackground(paragraph) {
+  const textSpans = Array.from(paragraph.querySelectorAll("span")).filter(
+    (element) => normalizePreviewText(element.textContent || "")
+  );
+  const lastTextSpan = textSpans.at(-1);
+  if (!lastTextSpan || !hasWhiteBackground(lastTextSpan)) {
+    return;
+  }
+  lastTextSpan.style.paddingRight = "3pt";
+  lastTextSpan.style.paddingTop = "2pt";
+  lastTextSpan.style.paddingBottom = "2pt";
+  lastTextSpan.style.boxDecorationBreak = "clone";
+}
+function hasWhiteBackground(element) {
+  const background = element.style.backgroundColor.replace(/\s+/g, "").toLowerCase();
+  return background === "white" || background === "#fff" || background === "#ffffff" || background === "rgb(255,255,255)";
+}
+function getDocxParagraphVisibleTextWidth(paragraph) {
+  let textWidth = 0;
+  for (const element of paragraph.querySelectorAll("span")) {
+    if (!normalizePreviewText(element.textContent || "")) {
+      continue;
+    }
+    textWidth += pxToPt(element.getBoundingClientRect().width);
   }
+  return textWidth;
+}
+function pxToPt(value) {
+  return value * 0.75;
 }
 function repairDocxListIndentAlignment(page) {
   for (const paragraph of page.querySelectorAll("p[class*='ofv-docx-num-']")) {