用 JavaScript 打开中国的版式文档：@sharp9/ofdjs 诞生记

src/
  index.js         — 公开 API 入口
  ofd.js           — OFD.xml 根节点解析
  document.js      — Document.xml + 资源解析
  elements.js      — 页面元素类型
  page.js          — Page.xml 解析
  render.js        — Canvas2D 渲染
  types.js         — 坐标辅助（mm→px、Box、Color、Matrix）
  xml-parser.js    — DOMParser 多态填充 + XML 工具
  path-resolver.js — ZIP 路径解析

import { readOfd, renderPageToCanvas, getPageCount, getPageDimensions } from '@sharp9/ofdjs';

invoice.ofd (ZIP)
├── OFD.xml              — 根入口，指向 DocBody
├── Doc_0/
│   ├── Document.xml     — 文档元数据 + 页面列表
│   ├── PublicRes.xml    — 公共字体资源
│   ├── DocumentRes.xml  — 图片/多媒体资源
│   ├── Pages/
│   │   ├── Page_0.xml   — 第 1 页内容
│   │   └── Page_1.xml   — 第 2 页内容
│   ├── Signs/
│   │   └── Sign_0.xml   — 签章/印章
│   └── Res/             — 嵌入图片 (PNG/JPG)
│       ├── image1.png
│       └── seal.jpg
│   └── Template/
│       └── Content.xml  — 模板页面（表格背景）

readOfd(file)
  → JSZip.loadAsync()     // 解压 ZIP
  → parseOfdXml()          // OFD.xml → DocBody → DocRoot
  → parseDocumentXml()     // Document.xml → 页面列表 + 资源引用
  → parsePublicResXml()    // 字体定义
  → parseDocumentResXml()  // 图片资源索引
  → preloadImages()        // 提取 ZIP 中的图片，创建 Image 对象
  → 返回 Ofd 对象

<TextObject ReadDirection="90" Boundary="28.5 52.08 5.95 40.18">
  <TextCode X="0" Y="0" DeltaY="g 6 5.95">密码区文字</TextCode>
</TextObject>

// render.js 核心逻辑（简化）
for (let i = 0; i < text.length; i++) {
  const dx = expandDelta(deltaX, i);  // 展开 "g N X" 语法
  const dy = expandDelta(deltaY, i);
  x += dx * (readDir === 90 ? -1 : 1);
  y += dy * (readDir === 90 ? 1 : -1);
  ctx.fillText(text[i], px(x), px(y));
}

ctx.drawImage(img, boundaryX, boundaryY, boundaryW, boundaryH);

<Page>
  <Template TemplateID="0" ZOrder="Background"/>
  <Content Layer="...">
    <TextObject ...>开票日期</TextObject>
    <TextObject ...>金额</TextObject>
  </Content>
</Page>

npm install @sharp9/ofdjs

npm install canvas linkedom   # 服务端渲染

<script src="https://cdn.jsdelivr.net/npm/jszip@3/dist/jszip.min.js"></script>

<script type="module">
  import { readOfd, renderPageToCanvas, getPageCount } from '@sharp9/ofdjs';

  const fileInput = document.querySelector('#ofd-file');
  const canvas = document.querySelector('#ofd-canvas');

  fileInput.addEventListener('change', async (e) => {
    const ofd = await readOfd(e.target.files[0]);
    await renderPageToCanvas(ofd, 0, canvas, { dpi: 150 });
  });
</script>

import { initDOMParser } from '@sharp9/ofdjs/xml-parser.js';
import { readOfd, renderPageToCanvas, exportOfdToPng } from '@sharp9/ofdjs';
import { createCanvas } from 'canvas';
import fs from 'fs';

await initDOMParser();  // 初始化 DOMParser polyfill

const buffer = fs.readFileSync('发票.ofd');
const ofd = await readOfd(new Uint8Array(buffer));

const dims = await getPageDimensions(ofd, 0);
const canvas = createCanvas(
  Math.round(dims.width * 96 / 25.4),
  Math.round(dims.height * 96 / 25.4)
);
await renderPageToCanvas(ofd, 0, canvas, { dpi: 96 });

fs.writeFileSync('page0.png', canvas.toBuffer('image/png'));

import { useState, useRef } from 'react';
import { readOfd, renderPageToCanvas, getPageCount, getPageDimensions } from '@sharp9/ofdjs';

function OfdViewer() {
  const [ofd, setOfd] = useState(null);
  const [pageIndex, setPageIndex] = useState(0);
  const canvasRef = useRef(null);

  const handleFile = async (e) => {
    const file = e.target.files[0];
    if (!file) return;
    const ofdData = await readOfd(file);
    setOfd(ofdData);
    setPageIndex(0);
  };

  React.useEffect(() => {
    if (ofd && canvasRef.current) {
      renderPageToCanvas(ofd, pageIndex, canvasRef.current, { dpi: 150 });
    }
  }, [ofd, pageIndex]);

  return (
    <div>
      <input type="file" accept=".ofd" onChange={handleFile} />
      <canvas ref={canvasRef} />
    </div>
  );
}

<template>
  <input type="file" accept=".ofd" @change="handleFile" />
  <canvas ref="canvasRef" />
</template>

<script setup>
import { ref, watch, nextTick } from 'vue';
import { readOfd, renderPageToCanvas } from '@sharp9/ofdjs';

const ofd = ref(null);
const canvasRef = ref(null);

async function handleFile(e) {
  ofd.value = await readOfd(e.target.files[0]);
}

watch(ofd, async () => {
  if (!ofd.value) return;
  await nextTick();  // 等 Vue 完成 DOM 更新
  await renderPageToCanvas(ofd.value, 0, canvasRef.value, { dpi: 150 });
});
</script>