[HTML] docx-preview.js 워드 미리보기
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
[](https://www.npmjs.com/package/docx-preview) [](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보다 먼저 로드하여 충돌을 방지해야 함.