Cara Mengekspor HTML ke Dokumen Word dengan JavaScript

Hallo sahabat dumenity berjumpa lagi dalam tutorial kursuswebdesign, pada tutorial kali ini saya akan membahas tentang Cara Mengekspor HTML ke Dokumen Word dengan JavaScript. Mengekspor halaman HTML sebagai dokumenÂ Microsoft wordÂ Â dapat dilakukan dengan cara yang berbeda. Ada plugin yang tersedia di jQuery, JavaScript untuk menerapkan ini di sisi klien. Kapan, file HTML sederhana tanpa markup kompleks, maka itu adalah hal yang sederhana untuk mengekspor konten HTML ke dokumen word. Saya bahkan tidak memerlukan library pihak ketiga. Jika Anda ingin menyembunyikan HTML ke dokumen Word, tanpa plugin atau library, tetapi hanya dengan JavaScript sederhana, lanjutkan membaca artikel ini.

Sederhana dan beberapa baris kode JavaScript cukup untuk mengekspor HTML. Dalam kode JavaScript ini, sumber HTML dibuat dengan header dan footer. Ruang nama XML akan ditentukan di bagian header. Sumber HTML ini akan dikodekan dan ditambahkan dengan data URI yang terhubung dengan elemen unduh yang dibuat secara dinamis.
Sumber HTML dengan Kontrol Ekspor

Laman utama akan menampilkan konten HTML berformat sederhana dengan kontrol tombol ekspor. Dengan mengklik tombol ini, fungsi JavaScript exportHTML () akan dipanggil. Bagian HTML yang akan diekspor ke dalam dokumen kata akan diidentifikasi dengan pemilih ID. Isi elemen DIV yang ditentukan dengan id source-html digunakan untuk membangun sumber ekspor HTML dalam fungsi JavaScript.

<div id="source-html">
    <h1>
        <center>Artificial Intelligence</center>
    </h1>
    <h2>Overview</h2>
    <p>
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s <u><i>Neural
                Networks</i>, <i>Robatics</i> or <i>Machine Learning</i></u>when an unknown printer took a galley of type and scrambled it to make a type specimen book

    </p>
</div>
<div class="content-footer">
    <button id="btn-export" onclick="exportHTML();">Export to
        word doc</button>
</div>

<h1>

<center>Artificial Intelligence</center>

</h1>

<h2>Overview</h2>

<p>

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s <u><i>Neural

Networks</i>, <i>Robatics</i> or <i>Machine Learning</i></u>when an unknown printer took a galley of type and scrambled it to make a type specimen book

</p>

</div>

<button id="btn-export" onclick="exportHTML();">Export to

word doc</button>

</div>

Fungsi JavaScript untuk Mengkonversi Dokumen HTML

Kode di bawah ini menunjukkan fungsi JavaScript yang digunakan untuk membuat data sumber HTML dengan header, body dan footer. Bagian header adalah untuk menentukan namespace yang diperlukan dan charset. Dengan spesifikasi ini, sumber HTML akan dikodekan untuk membentuk URI. Kemudian, elemen tautan unduhan akan dibuat secara dinamis dan URI terhubung dengan elemen ini. Kemudian, event klik dipicu secara terprogram untuk mengunduh dokumen word dengan data HTML yang diekspor.

<script>
    function exportHTML(){
       var header = "<html xmlns:o='urn:schemas-microsoft-com:office:office' "+
            "xmlns:w='urn:schemas-microsoft-com:office:word' "+
            "xmlns='http://www.w3.org/TR/REC-html40'>"+
            "<head><meta charset='utf-8'><title>Export HTML to Word Document with JavaScript</title></head><body>";
       var footer = "</body></html>";
       var sourceHTML = header+document.getElementById("source-html").innerHTML+footer;
       
       var source = 'data:application/vnd.ms-word;charset=utf-8,' + encodeURIComponent(sourceHTML);
       var fileDownload = document.createElement("a");
       document.body.appendChild(fileDownload);
       fileDownload.href = source;
       fileDownload.download = 'document.doc';
       fileDownload.click();
       document.body.removeChild(fileDownload);
    }
</script>

function exportHTML(){

var header = "<html xmlns:o='urn:schemas-microsoft-com:office:office' "+

"xmlns:w='urn:schemas-microsoft-com:office:word' "+

"xmlns='http://www.w3.org/TR/REC-html40'>"+

"<head><meta charset='utf-8'><title>Export HTML to Word Document with JavaScript</title></head><body>";

var footer = "</body></html>";

var sourceHTML = header+document.getElementById("source-html").innerHTML+footer;

var source = 'data:application/vnd.ms-word;charset=utf-8,' + encodeURIComponent(sourceHTML);

var fileDownload = document.createElement("a");

document.body.appendChild(fileDownload);

fileDownload.href = source;

fileDownload.download = 'document.doc';

fileDownload.click();

document.body.removeChild(fileDownload);

}

</script>

Oke itulah tadi pembahasan saya tentang Cara Mengekspor HTML ke Dokumen Word dengan JavaScript, untuk lebih jelasnya silahkan coba sendiri semoga bermanfaat.

Facebook DUMET School

Categories