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

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

"Open/Save(열기/저장)" 대화상자가 아닌 PDF 파일을 브라우저에 표시하는 코드를 성공적으로 실행했습니다.이제 Word 문서를 브라우저에 표시하려고 할 때 막힙니다.Firefox, IE7+, Chrome 등에서 Word 문서를 표시하고 싶습니다.

누구 도와줄 사람 있어?브라우저에 Word 문서를 표시하는 동안 항상 "열기/저장" 대화상자가 나타납니다.자바스크립트를 사용하여 이 기능을 구현하고 싶습니다.

현재 Word 문서를 렌더링하는 데 필요한 코드를 가진 브라우저는 없으며, 현재 Word 문서를 렌더링하는 클라이언트 측 라이브러리도 없는 것으로 알고 있습니다.

Document만 가 있고가 없는 통해 Documents Viewer를 할 수 .<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/.docxPDF 파일로 Mozilla에서 PDF.js를 사용하여 독립적으로 렌더링할 수도 있습니다.

편집:

Microsoft Office 365 뷰어를 코멘트 투고해 주신 cubeguerrero 씨께 감사드립니다.

<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 문서 뷰어

Microsoft Office Viewer

Brandon과 fatbotdesigns의 답변은 모두 맞지만 Google 문서 미리보기를 구현한 결과 Google에서 처리할 수 없는 .docx 파일이 여러 개 발견되었습니다.MS Office Online 프리뷰로 전환하여 매력적으로 작업합니다.

구글보다 MS Office Preview 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등을 사용해 주세요.}

데이터가 기밀인 경우 뛰어난 솔루션

문서는 기밀이므로 서드파티 리소스로 처리하지 마십시오.
이 솔루션은 오픈 소스입니다.

1. 서버측: Gotenberg를 사용하여 Word 및 Excel 파일을 PDF로 변환합니다.
   고텐버그 리브레오피스
2. 프런트 엔드:javascript를 사용하여 PDF 파일을 렌더링하는 것은 매우 간단합니다(pdf.js, react-pdf 등 라이브러리를 사용할 수 있습니다).

ViewerJs는 odt, odp, ods 및 pdf와 같은 오픈오피스 형식을 표시/삽입하는 데 도움이 됩니다.

openoffice/pdf 문서 포함

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

/ViewerJS/는 ViewerJViewerJ의입니다.s

#../demo/ohm2013입니다.

내게 좋은 생각이 있는 것 같다.이것도 너트를 넣고 있는데 크롬으로 표시하는데 아직 문제가 있어요.

문서(name.docx)를 단일 파일 웹 페이지(name.mht)로 저장합니다.html 사용 시

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

높이와 폭을 필요에 따라 변경하십시오.

실행 시까지 기다리지 않고 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 등)으로 확장할 수 있는 이점도 있습니다.

Native Documents(관심이 있는 문서)는 Word 문서(기존 이진 .doc 형식 및 최신 docx 형식) 전용 뷰어(및 편집자)를 만듭니다.HTML로 변환하는 손실 없이 실행할 수 있습니다.https://github.com/NativeDocuments/nd-WordFileEditor/blob/master/README.md 를 시작하는 방법은 다음과 같습니다.

PDFTron WebViewer는 Word(및 기타 Office 형식) 렌더링을 서버 측 의존관계 없이 모든 브라우저에서 직접 지원합니다.테스트하려면 , https://www.pdftron.com/webviewer/demo 를 사용해 주세요.

GroupDocs와 같은 기존 API를 사용할 수도 있습니다.문서를 이미지 또는 html로 변환하여 자신의 응용 프로그램에 표시할 수 있는 뷰어입니다.

조사 결과 Iframe에서 IMAGES, PDF, Document, Excel 파일 미리보기를 위해 취득했습니다.

<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="//code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>


<script type="text/javascript">
    $(document).ready(function() {
    $('#btnShow').click(function(){
        $("#dialog").dialog({
        height: 600,
        width: 1000,
        show: 'fold',
        modal: true
        });

        var toolbar = "#toolbar=0";

        //pdf
        //$("#frame").attr("src", "pdf_file_url.pdf"+toolbar);
        //image
        //$("#frame").attr("src", "image_file_url.jpeg"+toolbar);

        //document
        $("#frame").attr("src", "https://docs.google.com/gview?embedded=true&url=doc_file_url.docx");

        //excel

      // $("#frame").attr("src", "https://docs.google.com/gview?embedded=true&url=excel_file_url.xlsx");

    }); 
    });
</script>

<a href="javascript:void(0)" id="btnShow">Click to open</a>
<div id="dialog" style="display: none;">
    <div>
    <iframe id="frame" sandbox="allow-forms allow-modals allow-orientation-lock allow-pointer-lock allow-presentation allow-same-origin allow-scripts allow-top-navigation allow-top-navigation-by-user-activation" style="height:100%;width:100%;border: 0px;"></iframe>
    </div>
</div>

Libre Office API 사용 예시

libreoffice --headless --convert-to html docx-file-path --outdir html-dir-path

언급URL : https://stackoverflow.com/questions/27957766/how-do-i-render-a-word-document-doc-docx-in-the-browser-using-javascript