[Javascript] Menampilkan File Word (Docx) di Browser

Jurnal IT Desember 26, 2022

Artikel berikut menjelaskan cara menampilkan file Word (Docx) pada browser menggunakan Javascript.

Plugin docx-preview.js

File Word (Docx) akan ditampilkan di Browser menggunakan plugin JavaScript docx-preview.js.

Catatan: Pustaka ini hanya berfungsi untuk Word 2007 dan format yang lebih tinggi (docx) dan bukan format Word 97 – 2003 (doc).

Berikut plugin JavaScript yang akan digunakan.

1. docx-preview.js

2. jszip.min.js

Markup HTML

Markup HTML berikut terdiri dari elemen HTML FileUpload, Button, dan HTML DIV. Tombol telah ditetapkan dengan event handler JavaScript OnClick.

Ketika Tombol Preview diklik, data file Word ditampilkan di HTML DIV.

<input id="files" type="file" accept=".docx"/>
<input type="button" id="btnPreview" value="Preview Word Document" onclick="PreviewWordDoc()"/> 
<div id="word-container" class=""></div>

Implementasi JavaScript

Pertama, baris pemanggilan file JavaScript ditambahkan untuk plugin JavaScript docx-preview.js.

Saat Tombol Preview diklik, fungsi PreviewWordDoc dipanggil.

Dalam fungsi PreviewWordDoc, data file Word dibaca dari elemen FileUpload.

Terakhir, opsi pustaka docx-preview.js diinisialisasi dan dokumen Word dirender pada Container DIV menggunakan fungsi renderAsync.

<script type="text/javascript" src="https://unpkg.com/jszip/dist/jszip.min.js"></script>
<script src="Scripts/docx-preview.js"></script>
<script type="text/javascript">
    function PreviewWordDoc() {
        //Read the Word Document data from the File Upload.
        var doc = document.getElementById("files").files[0];
        //If Document not NULL, render it.
        if (doc != null) {
            //Set the Document options.
            var docxOptions = Object.assign(docx.defaultOptions, {
                useMathMLPolyfill: true
            });
            //Reference the Container DIV.
            var container = document.querySelector("#word-container");
            //Render the Word Document.
            docx.renderAsync(doc, container, null, docxOptions);
        }
    }
</script>