설치하기
HWPJS는 여러 플랫폼에서 사용할 수 있습니다. 사용할 환경에 맞는 설치 방법을 선택하세요.
설치
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 프로젝트는 자동으로 설정됩니다. 추가 설정이 필요하지 않습니다.
Deno
Deno에서는 npm 스펙을 사용하여 설치할 수 있습니다:
import { toJson } from 'npm:@ohah/hwpjs';또는 deno.json에 의존성을 추가할 수 있습니다:
deno.json
{
"imports": {
"@ohah/hwpjs": "npm:@ohah/hwpjs@^1.0.0"
}
}CLI 설치
명령줄 인터페이스를 사용하려면 전역 설치가 필요합니다:
npm install -g @ohah/hwpjs또는 npx를 사용하여 전역 설치 없이 사용할 수 있습니다:
npx @ohah/hwpjs <command>더 자세한 내용은 CLI 가이드를 참고하세요.
사용 예제
// buffer-polyfill을 먼저 import한 후
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;
const arrayBuffer = await file.arrayBuffer();
const data = new Uint8Array(arrayBuffer);
// JSON으로 변환
const jsonResult = hwpjs.toJson(data);
console.log(jsonResult);
// 마크다운으로 변환
const markdownResult = hwpjs.toMarkdown(data, {
image: 'base64', // 또는 'blob'
useHtml: true,
includeVersion: true,
includePageInfo: false,
});
console.log(markdownResult.markdown);
});더 자세한 예제는 예제 페이지를 참고하세요.
개발 환경 설정
프로젝트를 개발하기 위한 환경 설정은 개발 환경 설정 문서를 참고하세요.