React 개발환경에서 yarn install (npm install) 후에 hwp.js 임포트 시에, fs모듈을 찾지 못한다는 에러문구가 발생합니다.

webpack이 v5로 넘어가면서 생긴 오류인 것 같습니다.

ERROR in ./node_modules/hwp.js/build/esm.js 1:0-28
Module not found: Error: Can't resolve 'fs' in '~~~'

라이브러리 버전정보
"react-scripts": "^5.0.1",
"hwp.js": "^0.0.3",

한글 2018 최신 버전(10.0.0.10376)에서 생성한 한글 파일이
데모 페이지(https://hanlee.io/hwp.js/demo/)에서 전혀 작동이 되지 않습니다.

https://www.grac.or.kr/Board/Inform.aspx?bno=660&type=view&pageindex=0 에서 받은 파일을 데모 페이지에서 열면 제목과 같은 오류가 발생합니다. 이번에는 콘솔에 에러 스택이 안 뜨네요 👀

다단 지원하기

Just like pdf.js or google docs

Error: Header Signature: Expected d0cf11e0a1b11ae1 saw 3c21444f43545950
at Uint8Array.CheckField [as chk] (cfb.js:159:1)
at check_get_mver (cfb.js:473:1)
at parse (cfb.js:387:1)
at Object.read (cfb.js:697:1)
at parse (parse.ts:95:1)
at new HWPViewer (viewer.ts:88:1)
at PayProofBody.js:57:1

배포용 문서에서는 동작하지 않습니다.

HWP 파일 내부에 삽입되어 있는 수식을 무시하고 출력 합니다.

DocInfo 스트림의 문단 번호 레코드는 공식문서가 올바르지 않습니다.
hwplib을 참고한 결과 12바이트가 각 정보마다 속성으로써 들어가 있습니다.
아래 스위프트 코드는 제 HwpKit에서 가져온 것입니다.
추후 구현을 위해 이슈로 등록해 놓겠습니다. 감사합니다

/**
 문단 번호
 
 Tag ID : HWPTAG_NUMBERING
 
  * 잘못된 문서화
 */
public struct HwpNumbering {
    /**
     7회 반복 수준(1~7)
     
     각 레벨에 해당하는 숫자 또는 문자 또는 기호를 표시
     */
    public var formatArray: [HwpNumberingFormat]
    /**시작 번호*/
    public let startingIndex: UInt16
    /**수준별 시작번호 (5.0.2.5 이상)*/
    public var startingIndexArray: [UInt32]?
    /**
     3회 반복 수준(8~10)
     
     각 레벨에 해당하는 숫자 또는 문자 또는 기호를 표시
     */
    public var extendedFormatArray: [HwpNumberingFormat]?
    /**확장 수준별 시작번호 (5.1.0.0 이상)*/
    public var extendedStartingIndexArray: [UInt32]?
}

public struct HwpNumberingFormat: HwpPrimitive {
    /**
     속성
     
     * 주의! : 잘못된 문서화
     길이: 12바이트
     */
    public let property: [BYTE]
    /**번호 형식 길이*/
    public let formatLength: WORD
    /**
     번호 형식.
     
     불릿 문단의 경우에는 사용되지 않는다. 문자열 내 특정 문자에 제어코드(^)를 붙임으로써 글에서 표시되는 번호 문단 머리의 형식을 제어한다.
     ^n : 레벨 경로를 표시한다.(예: 1.1.1.1.1.1.1)
     ^N : 레벨 경로를 표시하며 마지막에 마침표를 하나 더 찍는다.(예: 1.1.1.1.1.1.1.)
     */
    public let format: String
}

한글문서파일형식_5.0_revision1.3.pdf 표 43 참조

• 속성 1
• 왼쪽 여백
• 오른쪽 여백
• 들여 쓰기/내어 쓰기
• 문단 간격 위
• 문단 간격 아래
• 줄 간격. 한글 2007 이하 버전(5.0.2.5 버전 미만)에서 사용
• 탭 정의 아이디(TabDef ID) 참조 값
• 번호 문단 ID(Numbering ID) 또는 글머리표 문단 모양 ID(Bullet ID) 참조 값
• 테두리/배경 모양 ID(BorderFill ID) 참조 값
• 문단 테두리 왼쪽 간격
• 문단 테두리 오른쪽 간격
• 문단 테두리 위쪽 간격
• 문단 테두리 아래쪽 간격
• 속성 2 (5.0.1.7 버전 이상)
• 속성 3 (5.0.2.5 버전 이상)
• 줄 간격(5.0.2.5 버전 이상)

모바일에서 테스트를 진행하다 출력이 제대로 되지 않는 문제를 발견했습니다.
크롬, 엣지, 삼성 브라우저 등 웬만한 브라우저에서는 모두 문제가 생깁니다.
아마 모바일 브라우저에서 프린트 관련 속성을 무시하는것 같습니다.

현재 구현하시고 있는 Canvas Renderer가 좋은 해결책일것 같습니다.
물론 모바일에서 출력할 일은 매우 드물기 때문에 급한 문제는 아니지만, 이 모듈의 원조격이라 할수있는 pdf.js가 모바일에서의 출력도 제대로 되는것을 보면 정식 출시 전에는 해결해야 할것 같습니다.

Chrome 웹 스토어에서 확장 프로그램이 삭제되어 접속 시 404 오류가 발생합니다.

Chrome의 확장 프로그램 메뉴에서는 아래와 같은 오류 문구가 표시됩니다.

Warning
이 확장 프로그램은 Chrome 웹 스토어 정책을 위반합니다.

Read.me에서는 npm install만 명시되어 있는데
Local 환경에서 서비스까지 필요한 빌드환경 메뉴얼도 명시 해주시면
감사하겠습니다

핵토버페스트는 디지털오션에서 매년 10월에 진행하는 오픈소스 기여 행사입니다.
핵토버페스트 참여자는 무료 티셔츠 등의 보상을 받을 수 있습니다.

올해 핵토버페스트 행사는 스팸으로 인한 피해를 줄이기 위해 hacktoberfest 토픽이 달려있는 저장소에 대한 PR만 인정을 한다고 합니다: https://hacktoberfest.digitalocean.com/hacktoberfest-update

기여를 장려하기 위해 hwp.js 저장소에 hacktoberfest 토픽을 걸어주시면 감사하겠습니다.

저장소에 토픽을 추가하는 방법

When you open this file, not only does the content not display, but also the entire layout is broken.

I tried to open this hwp document but failed.
Not sure it is valid document but need to show any message if it cannot be opened.

P.S. I'm a big fan of your work:+1:

안녕하세요 hwp.js 개발자 이한 입니다.
어느정도 관심을 받을것 이라고 생각했지만, 알파 수준의 라이브러리가 이렇게 관심을 받을줄은 몰랐습니다.
주말에 블로그로 전체적인 내용을 정리하려고 했지만, 그보다 빠르게 프로젝트 방향과 상태를 공유 드리는게 좋을것 같습니다.

현 상황

• 현재 제가 생각하고 있는 커버리지는 20% 정도 되는것 같습니다.
  • hwp.js는 개인적으로 필요하여 만든 라이브러리이며, 현 버전은 제가 필요로 하는 문서는 대부분 읽을수 있었습니다. 하지만 Real World에선 아직 역부족 으로 보입니다.
• 빠른개발과 포멧 문서에 나온 내용을 구현하기 위해 배포용 문서는 파싱 & 렌더링을 할 수 없습니다.
• 빠른 개발을 위해 canvas가 아닌 html로 렌더링 하였습니다.
• 크롬 확장프로그램은 심사중에 있습니다. 심사 완료
• 안정적인 API를 제공하지 않고 있습니다
  • 파서가 어떤 데이터를 제공해야할지 매우 고민입니다
  • 예를들어 한/글은 1/7200 인치 단위를 기준으로 데이터를 저장합니다. 렌더러를 만들면서 매번 인치나 pt단위로 바꾸는게 불편하였습니다
  • 한/글 포멧은 제가 아는한 명시적인 페이지 나눔을 해주지 않습니다.
    • 예를들어 페이지 구분은 한/글 포멧을 단순히 파싱만하면 제공하지 않습니다. 하지만 실제 상황에서 많이 쓰일것 같아 고민입니다.
  • 한글은 '한' '글' 처럼 1글자 단위로 저장합니다.

향후 계획

우선순위 높음

• 네이버 한글 문서에 있는 템플릿을 모두 에러없이 읽어오기
• 테스트 코드 커버리지 증가
• HTML이 아닌 canvas로 렌더링하기
• 크롬, 파이어폭스, 사파리 확장프로그램 제공

우선순위 낮음

• 비밀번호 지원
• pdf 변환
• 배포문서 지원
• 확대 / 축소 (css scale만으론 안됩니다 😢)

개발 목표가 아님

• hwp 3.0 지원
  • 5.0 지원 만으로도 벅찬 상황입니다
• hwp 생성
  • 비교적 넘길수 있는 많은 요소를 챙겨야 합니다. 적어도 1.0 버전에는 포함되지 않을 예정입니다.
  • 개인적으로는 hwp 파일이 더 늘지 않았으면 합니다.

도움 필요

• hwp.js를 활용할 방안을 알려주시면 안정적인 API를 생각하는데 도움이 됩니다. 희망하시는 사례를 알려 주세요
• 배포용문서를 제외한 5.0문서중 파싱이 되지 않는 문서를 전달해주시면 도움이 됩니다
  • 민감한 문서라면 [email protected] 으로 메일 주셔도 됩니다
• PR과 이유는 언제든지 환영입니다.

무엇보다 이 프로젝트는 제 주된 업무가 아닙니다. 다소 늦더라도 양해부탁드립니다.

현재 모든 char를 같은 크기로 보고 스타일 적용중이나 https://github.com/hahnlee/hwp.js/blob/6088721/src/viewer/viewer.ts#L272
Extends와 Inline을 8바이트로 취급해야 정상적인 스타일링이 될것 으로 보 임. https://github.com/hahnlee/hwp.js/blob/6088721/src/parser/PageBuilder.ts#L75

안녕하세요.
우선 소스 이슈가 아닌, 개인 환경설정에 대한 문의를 이슈로 올려드려 죄송합니다.

제가 hwp.js 기능이 필요해 type script를 처음 배포해보는 개발자입니다.
제 개발환경 세팅에 문제있는것 같아 이렇게 문의드립니다.

@disjukr 님께서 #61 에 커맨트 달아주신 내용과 같이 진행하고 있습니다.
yarn 과 yarn build 후, 아래와 같은 결과가 나타납니다.

현재 yarn list는 아래와 같습니다.

도움주셔서 감사합니다.

Expect

Current

안녕하세요, https://hanlee.io/hwp.js/ 이곳에 있는 crx파일을 다운받아 Firefox에 설치하려 하니 오류(manifest.json오류)와 검사받지 않은 부가 기능을 설치하지 못하게 막았다고 뜨며 설치가 되지 않습니다.

부가기능 인증은 이 곳을 참고하시면 될 듯 합니다.

가능하시다면 Firefox용 HWP.js Addon을 제작해주시면 감사하겠습니다.

Enhancing the UI 에 포함된 내용일지는 모르겠지만,

현재는 VIewer 크기가 한글파일의 section의 size에 맞춰져 있다면, 추가인자로 width 또는 height을 입력받고,

Hwp Viewer form을 해당 Size에 맞추는 기능이 추가되었으면 좋겠습니다.

test.zip

해당 업로드된 문서를 통해 Demo 미리보기를 테스트 진행 중 아래와 같은 에러가 발생합니다.

에러가 발생했습니다
Maximum call stack size exceeded

확인 부탁드립니다.
감사합니다.

윗첨자/아랫첨자를 무시하고 출력합니다.

#13 의 주석 참고

한글문서파일형식_5.0_revision1.3.pdf 표 70 참조

• 글자처럼 취급
• 줄 간격에 영향을 줄지 여부
• 세로 위치의 기준 (VertRelTo)
• 세로 위치의 기준에 대한 상대적인 배열 방식
• 가로 위치의 기준 (HorzRelTo)
• HorzRelTo에 대한 상대적인 배열 방식
• VertRelTo이 ‘para’일 때 오브젝트의 세로 위치를 본문 영역으로 제한할지 여부
• 다른 오브젝트와 겹치는 것을 허용할지 여부
• 오브젝트 폭의 기준
• 오브젝트 높이의 기준
• VertRelTo이 para일 때 크기 보호 여부
• 오브젝트 주위를 텍스트가 어떻게 흘러갈지 지정하는 옵션
• 오브젝트의 좌/우 어느 쪽에 글을 배치할지 지정하는 옵션
• 이 개체가 속하는 번호 범주

Uncaught (in promise) TypeError: FileReader.readAsBinaryString: Argument 1 is not an object.
    l demo.tsx:44
    onDrop demo.tsx:51
    de index.js:613
    promise callback*H/de< index.js:564
    M index.js:198
    M index.js:196
    React 31
    UxWs production-app.js:181
    setTimeout handler*MMVs/t.exports</< ready.js:37
    UxWs production-app.js:179
    promise callback*UxWs/< production-app.js:153
    promise callback*UxWs production-app.js:39
    Webpack 5
demo.tsx:44:11

Firefox/Chrome에서 같은 문제가 발생합니다. 뭔가 로직 문제로 파일 객체 자체가 제대로 전달되지 않는 것 같습니다.

오픈소스니 이제 무료~!

• javascript: scheme 막기

공식 문서의 단 정의에는 count 가 1일 시, data 가 14바이트라고 나와 있습니다.
하지만 실제로는 ctrlId(uint32)를 포함해서 16바이트가 나옵니다.
제 추측으로는 공식문서에 표 139 단 정의 속성 만이 나오고 "UINT16 속성의 bit 16-32(표 139 참조)" 이 나오지 않는 것으로 보아 해당 UINT16이 없는 것 같습니다.

데모 페이지(https://hanlee.io/hwp.js/demo/)가 작동하지 않습니다.
깃허브 페이지로 출력하실 때 hwp.js가 빠진것 같습니다.

PDF.js 처럼 캔버스로 렌더링하기

• 성능, 렌더링 정확성 및 배포문서 지원을 위해 필요함

Make PDF

• 100쪽 이상 문서 렌더링때 확실히 문제가 보임

if (m !== hexstr) throw new Error(fld + 'Expected ' + hexstr + ' saw ' + m);
                  ^

Error: Header Signature: Expected d0cf11e0a1b11ae1 saw e12fbfd35db7e39e
at Buffer.CheckField [as chk] (/Volumes/Workspace/node_modules/hwp.js/build/cjs.js:569:29)
at check_get_mver (/Volumes/Workspace/node_modules/hwp.js/build/cjs.js:953:12)
at parse (/Volumes/Workspace/node_modules/hwp.js/build/cjs.js:853:16)
at Object.read (/Volumes/Workspace/node_modules/hwp.js/build/cjs.js:1264:18)
at parse (/Volumes/Workspace/node_modules/hwp.js/build/cjs.js:12960:23)
at Object. (/Volumes/Workspace/langchain/script3.js:8:13)
at Module._compile (node:internal/modules/cjs/loader:1105:14)
at Module._extensions..js (node:internal/modules/cjs/loader:1159:10)
at Module.load (node:internal/modules/cjs/loader:981:32)
at Module._load (node:internal/modules/cjs/loader:827:12)

무슨 문제일까요..

Probably It's a useless issue, but I found that there is a typo in your source code file.

/src/parser/DotInfoParser.ts

I think it should be DotInfoParser.ts --> DocInfoParser.ts
Thanks

일반문서는 충분히 빠르지만, 보고서 등 페이지가 많은 문서를 위해 도입하는게 좋을듯