Cara Mengekspor Dokumen HTML ke Word dengan JavaScript

0 10

Mengekspor halaman HTML sebagai dokumen Microsoft Word dapat dilakukan dengan berbagai cara. Ada plugin yang tersedia di jQuery, JavaScript untuk mengimplementasikan ini di sisi klien. Ketika, file HTML itu sederhana tanpa markup yang rumit, maka itu adalah hal yang sederhana untuk mengekspor konten HTML ke dokumen word. Saya bahkan tidak membutuhkan library atau third party mana pun. Jika kamu ingin menyamarkan dokumen HTML ke Word, tanpa plugin atau library, tetapi hanya dengan JavaScript sederhana, lanjutkan membaca artikel ini.

Sederhana dan hanya beberapa baris kode JavaScript sudah cukup untuk mengekspor HTML. Dalam kode JavaScript ini, HTML koding dibuat dengan header dan footer. Namespaces XML akan ditentukan di bagian header. koding HTML ini akan dikodekan dan ditambahkan dengan data URI yang terhubung dengan elemen unduhan yang dibuat secara dinamis.

Sumber HTML dengan Kontrol Ekspor

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

<div class="source-html-outer">
<div id="source-html">
<h1>
<center>Hypertext Markup Language</center>
</h1>
<h2>Overview</h2>
<p>
HTML adalah singkatan dari Hypertext Markup Language, dan itu adalah bahasa yang paling banyak digunakan untuk menulis Halaman Web.

<ul>
<li><b>Hypertext</b> mengacu pada cara di mana halaman Web <i>(dokumen HTML)</i> dihubungkan bersama. Dengan demikian, tautan yang tersedia di laman web disebut Hypertext.</li>

<li>Seperti namanya, HTML adalah Bahasa Markup yang berarti Anda menggunakan HTML untuk sekadar "menandai" dokumen teks dengan tag yang memberi tahu peramban Web cara menyusunnya agar ditampilkan.</li>
</ul>

Awalnya, HTML dikembangkan dengan maksud mendefinisikan struktur dokumen seperti pos, paragraf, daftar, dan sebagainya untuk memfasilitasi pertukaran informasi ilmiah antar peneliti.

Sekarang, HTML banyak digunakan untuk memformat halaman web dengan bantuan berbagai tag yang tersedia dalam bahasa HTML.

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

Awalnya, HTML dikembangkan dengan maksud mendefinisikan struktur dokumen seperti pos, paragraf, daftar, dan sebagainya untuk memfasilitasi pertukaran informasi ilmiah antar peneliti.

Sekarang, HTML banyak digunakan untuk memformat halaman web dengan bantuan berbagai tag yang tersedia dalam bahasa HTML.

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

Fungsi JavaScript untuk Mengonversi Dokumen HTML

Kode di bawah ini menunjukkan fungsi JavaScript yang digunakan untuk membuat data koding HTML dengan header, body dan footer. Bagian header adalah untuk menentukan namespace dan charset yang diperlukan. Dengan spesifikasi ini, HTML sumber akan dikodekan untuk membentuk URI. Kemudian, elemen tautan unduhan akan dibuat secara dinamis dan URI di-hyperlink dengan elemen ini. Kemudian, event klik dipicu secara program 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>

Tangkapan Layar Sumber Data HTML

Tangkapan layar ini menunjukkan halaman arahan dengan data koding HTML dan tombol ekspor.

Demo

Get real time updates directly on you device, subscribe now.

Leave A Reply

Your email address will not be published.