HWPJS

    예제

    HWPJS를 사용하는 다양한 예제를 확인하세요.

    기본 예제

    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 result = hwpjs.toJson(data);
    console.log('변환 성공:', result);
  } catch (error) {
    console.error('변환 실패:', error);
  }
});

    마크다운 변환

    Web
    React Native
    Node.js
    import './buffer-polyfill';
import * as hwpjs from '@ohah/hwpjs';

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);

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

    HTML 변환

    Web
    React Native
    Node.js
    import './buffer-polyfill';
import * as hwpjs from '@ohah/hwpjs';

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);

    // HTML로 변환 (이미지는 base64로 임베드)
    const html = hwpjs.toHtml(data, {
      includeVersion: true,
      includePageInfo: false,
    });
    
    // HTML을 화면에 표시
    const outputDiv = document.getElementById('output');
    if (outputDiv) {
      outputDiv.innerHTML = html;
    }
  } catch (error) {
    console.error('변환 실패:', error);
  }
});

    HTML 변환 특징:

    • 기본적으로 이미지는 base64 데이터 URI로 HTML에 임베드됩니다
    • imageOutputDir 옵션을 지정하면 이미지를 별도 파일로 저장하고 상대 경로로 참조합니다
    • 완전한 HTML 문서 (<html>, <head>, <body> 포함)를 생성합니다
    • CSS 클래스 기반 스타일링을 사용합니다

    buffer-polyfill.ts 파일 생성

    Web 환경에서는 WASM을 사용하기 위해 buffer-polyfill.ts를 먼저 import해야 합니다.

    프로젝트에 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;
}