Developer's Development

[HTML] docx-preview.js 워드 미리보기 본문

개발/HTML

[HTML] docx-preview.js 워드 미리보기

mylee99 2024. 3. 13. 17:38

Case)

docx-preview.js는 HTML 문서 내에서 Word 파일을 렌더링하여 미리보기를 제공하는 데 사용됨.
처음엔 mammoth.js(mammoth.browser.min.js)를 사용하였으나, 이는 HTML로 변환 후 스타일 적용의 제한이 있어 docx-preview.js로 진행함.
XMLHttpRequest 통신 후, docx.renderAsync 함수에 전달한 파일의 데이터는 Blob 형태임.

 

Reference

https://www.npmjs.com/package/docx-preview

 

docx-preview

[![npm version](https://badge.fury.io/js/docx-preview.svg)](https://www.npmjs.com/package/docx-preview) [![Support Ukraine](https://img.shields.io/badge/Support-Ukraine-blue?style=flat&logo=adguard)](https://war.ukraine.ua/). Latest version: 0.3.0, last pu

www.npmjs.com

https://jstool.gitlab.io/demo/docx-preview.js_word_to_html/

 

docx preview demo, online js word to html web page preview.docx document word conversion html rich text display

docx preview demo, js word to html preview Import a .docx file to preview the word document content: --> --> Quickly use docx-preview.js function onGetFile(el) { var file = el. files[0] var options = { inWrapper: false, ignoreWidth: true, ignoreHeight: tru

jstool.gitlab.io

 

사용 방법
<!--lib uses jszip-->
<script src="https://unpkg.com/jszip/dist/jszip.min.js"></script>
<script src="docx-preview.min.js"></script>
<script>
    var docData = <document Blob>;

    docx.renderAsync(docData, document.getElementById("container"))
        .then(x => console.log("docx: finished"));
</script>
<body>
    ...
    <div id="container"></div>
    ...
</body>

 

최종 코드
//파일명으로 타이틀을 설정한 새 창에 미리보기를 제공함.
const newWindow = window.open('', '_blank');
newWindow.document.write("<html><head><title>"+orgFileNm+"</title>" +
        "<script src='/js/jszip.min.js'><\/script>" +
        "<script src='/js/docx-preview.js'><\/script>" +
        "</head><body style='margin: 0; !important'><div id='output'></div></body></html>");

docx.renderAsync(request.response, newWindow.document.getElementById("output"));

 

코드를 작성하며 났던 에러
Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'loadAsync')
//JSZip 객체가 정의되지 않았을 때 발생함.
//(중요)LuckyExcel js와 함께 사용할 경우 jszip.min.js를 luckyexcel.umd.js보다 먼저 로드하여 충돌을 방지해야 함.

 

저작자표시 비영리 변경금지

'개발 > HTML' 카테고리의 다른 글

[HTML] Chart.js stacked bar chart 생성  (0) 2024.05.30
[HTML] Luckysheet.js 엑셀 미리보기  (1) 2024.04.15
[HTML] Sheet.js & xspreadsheet.js 엑셀 미리보기  (0) 2024.02.05
[HTML] selectbox control (jQuery)  (3) 2023.11.22
[HTML] checkbox control (jQuery/search area)  (0) 2023.05.02
'개발/HTML' Related Articles more
Comments