설치하기

HWPJS는 여러 플랫폼에서 사용할 수 있습니다. 사용할 환경에 맞는 설치 방법을 선택하세요.

설치

npm
yarn
pnpm
bun
deno
npm install @ohah/hwpjs

플랫폼별 설정

Web - Buffer Polyfill 설정

Web 환경에서는 napi-rs WASM 호환성을 위해 Buffer polyfill이 필요합니다. 진입점 파일(예: main.tsx, index.ts)에서 가장 먼저 buffer-polyfill.ts를 import해야 합니다.

먼저 프로젝트에 buffer-polyfill.ts 파일을 생성하세요:

src/buffer-polyfill.ts
// Buffer polyfill for napi-rs WASM compatibility
// This must be imported before any WASM modules
if (typeof globalThis.Buffer === 'undefined') {
  globalThis.Buffer = class Buffer extends Uint8Array {
    static from(data: any) {
      if (data instanceof Uint8Array) return data;
      if (data instanceof ArrayBuffer) return new Uint8Array(data);
      if (Array.isArray(data)) return new Uint8Array(data);
      return new Uint8Array(data);
    }
    static isBuffer(obj: any) {
      return obj instanceof Uint8Array;
    }
  } as any;
}

// Ensure Buffer is set on window as well for compatibility
if (typeof window !== 'undefined' && typeof window.Buffer === 'undefined') {
  (window as any).Buffer = globalThis.Buffer;
}

그리고 진입점 파일에서 가장 먼저 import하세요:

src/main.tsx
import './buffer-polyfill'; // 반드시 가장 먼저 import
import * as hwpjs from '@ohah/hwpjs';
// ... 나머지 코드

React Native

iOS와 Android 프로젝트는 자동으로 설정됩니다. 추가 설정이 필요하지 않습니다.

CLI 설치

명령줄 인터페이스를 사용하려면 전역 설치가 필요합니다:

npm install -g @ohah/hwpjs

또는 npx를 사용하여 전역 설치 없이 사용할 수 있습니다:

npx @ohah/hwpjs <command>

더 자세한 내용은 CLI 가이드를 참고하세요.

사용 예제

Web
React Native
Node.js
// buffer-polyfill을 먼저 import한 후
import './buffer-polyfill';
import * as hwpjs from '@ohah/hwpjs';

// 파일 입력에서 HWP 파일 읽기
const fileInput = document.querySelector('input[type="file"]');
fileInput.addEventListener('change', async (e) => {
  const file = (e.target as HTMLInputElement).files?.[0];
  if (!file) return;

  try {
    const arrayBuffer = await file.arrayBuffer();
    const data = new Uint8Array(arrayBuffer);

    // JSON으로 변환
    const jsonResult = hwpjs.toJson(data);
    console.log('JSON 변환 성공:', jsonResult);

    // 마크다운으로 변환
    const markdownResult = hwpjs.toMarkdown(data, {
      image: 'base64', // 또는 'blob'
      useHtml: true,
      includeVersion: true,
      includePageInfo: false,
    });
    console.log('마크다운 변환 성공:', markdownResult.markdown);
  } catch (error) {
    console.error('변환 실패:', error);
  }
});

더 자세한 예제는 예제 페이지를 참고하세요.

개발 환경 설정

프로젝트를 개발하기 위한 환경 설정은 개발 환경 설정 문서를 참고하세요.