JavaScript를 사용하여 브라우저에서 Word 문서 (.doc, .docx)를 어떻게 렌더링합니까?

"열기 / 저장"대화 상자 대신 브라우저에서 PDF 파일을 표시하는 코드를 성공적으로 수행했습니다. 이제 브라우저에 Word 문서를 표시하려고합니다. Firefox, IE7 +, Chrome 등에서 Word 문서를 표시하고 싶습니다.

아무도 도와 줄 수 있습니까? 브라우저에 Word 문서를 표시하는 동안 항상 "열기 / 저장"대화 상자가 나타납니다. JavaScript를 사용하여이 기능을 구현하고 싶습니다.

현재 브라우저에 Word 문서를 렌더링하는 데 필요한 코드가 없으며 내가 아는 한 현재 클라이언트 측 라이브러리도 없습니다.

그러나 Word 문서 만 표시해야하지만 편집 할 필요가없는 경우을 통해 Google 문서 뷰어를 사용 <iframe>하여 원격 호스팅 .doc/ / 를 표시 할 수 .docx있습니다.

<iframe src="https://docs.google.com/gview?url=http://remote.url.tld/path/to/document.doc&embedded=true"></iframe>

" fancybox를 사용하여 단어 문서를 표시하는 방법 "에서 수정 된 솔루션 .

예:

JSFiddle

그러나 대부분의 브라우저에서 기본 지원을 원한다면 .doc/ .docx를 PDF 파일로 다시 저장하는 것이 좋습니다 . Mozilla에서 PDF.js 를 사용하여 독립적으로 렌더링 할 수도 있습니다 .

편집하다:

의견에 Microsoft Office 365 뷰어를 게시 한 fatbotdesigns 에게 감사드립니다 .

<iframe src='https://view.officeapps.live.com/op/embed.aspx?src=http://remote.url.tld/path/to/document.doc' width='1366px' height='623px' frameborder='0'>This is an embedded <a target='_blank' href='http://office.com'>Microsoft Office</a> document, powered by <a target='_blank' href='http://office.com/webapps'>Office Online</a>.</iframe>

lightswitch05 에서 지적했듯이 명심해야 할 또 하나의 중요한 경고 사항 은 문서를 타사 서버에 업로드한다는 것입니다. 이것이 용납 할 수없는 경우,이 표시 방법은 적절한 조치가 아닙니다.

라이브 예 :

Google 문서 도구 뷰어

마이크로 소프트 오피스 뷰어

Brandon과 fatbotdesigns의 답변은 모두 정확하지만 Google 문서 미리보기를 구현 한 결과 Google에서 처리 할 수없는 .docx 파일이 여러 개 발견되었습니다. MS 오피스 온라인 미리보기로 전환하고 매력처럼 작동합니다.

Google에 MS Office 미리보기 URL을 사용하는 것이 좋습니다.

https://view.officeapps.live.com/op/embed.aspx?src=http://remote.url.tld/path/to/document.doc' 

.docx (.doc 아님)를 HTML로 클라이언트 측에서 특별한 순서로 처리 할 수있는 js 라이브러리가있는 것 같습니다.

• https://github.com/lalalic/docx2html — docx에서 html로, 대부분의 요소가 지원됩니다

• https://github.com/mwilliamson/mammoth.js — 제목, 목록, 표, 미주, 각주, 이미지 및 텍스트 상자 지원

• https://www.npmjs.com/package/docx2html — 브라우저 또는 nodejs에서 DOCX 문서를 HTML로 변환

• https://github.com/artburkart/docx2html — 분명히 브라우저에서 작동

^{참고 : 클라이언트 측에서 doc / docx 파일을 변환하는 가장 좋은 방법을 찾고 있다면 아마도 대답 하지 않을 것 입니다. 정말로해야 할 경우 헤드리스 모드의 libreoffice , apache-poi (java) , pandoc 또는 다른 라이브러리가 가장 적합한 서버 측을 사용하여 서버 측에서 수행하십시오 .}

아이디어가 있다고 생각합니다. 이것은 내 견과도 마찬가지이며 Chrome에 표시하는 데 여전히 문제가 있습니다.

html로 문서 (name.docx)를 단일 파일 웹 페이지 (name.mht)로 단어로 저장하십시오.

<iframe src= "name.mht" width="100%" height="800"> </iframe>

원하는대로 높이와 너비를 변경하십시오.

ViewerJS 는 odt , odp, ods 및 pdf와 같은 openoffice 형식을 보거나 포함하는 데 도움이됩니다.

오픈 오피스 / pdf 문서 임베드

<iframe src = "/ViewerJS/#../demo/ohm2013.odp" width='700' height='550' allowfullscreen webkitallowfullscreen></iframe>

/ViewerJS/ ViewerJS의 경로입니다

#../demo/ohm2013 포함하려는 파일의 경로입니다

Native Documents (관심있는 문서)는 Word 문서 (레거시 이진 .doc 및 최신 docx 형식)를 위해 특별히 뷰어 (및 편집기)를 만듭니다. HTML 로의 손실없이 변환합니다. 시작하는 방법은 다음과 같습니다 https://github.com/NativeDocuments/nd-WordFileEditor/blob/master/README.md

런타임까지 기다리지 않고 DOCX 파일을 사전 처리하려면 Zamzar 와 같은 파일 변환 API를 사용하여 먼저 HTML로 변환 할 수 있습니다 . API를 사용하여 프로그래밍 방식으로 DOCX에서 HMTL로 변환하고 출력을 서버에 저장 한 다음 해당 HTML을 최종 사용자에게 제공 할 수 있습니다.

변환은 매우 쉽습니다.

curl https://api.zamzar.com/v1/jobs \
-u API_KEY: \
-X POST \
-F "source_file=@my.docx" \
-F "target_format=html5"

이렇게하면 Google 및 Microsoft 서비스에 대한 런타임 종속성이 제거됩니다 (예 : 서비스가 다운되었거나 속도 제한이있는 경우).

또한 확장 할 수있는 이점도 있습니다 원하는 경우 다른 파일 형식 (PPTX, XLS, DOC 등)으로