Cara Mengekspor HTML ke Dokumen Word

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, silahkan bacaartikel ini.

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

Source HTML dengan Kontrol Ekspor

landing page 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 word akan diidentifikasi dengan selector ID. Isi elemen DIV yang ditentukan dengan id source-html digunakan untuk membangun Source ekspor HTML dalam fungsi JavaScript.

<html>
<head>
<title>How to Export HTML to Word Document with JavaScript</title>

</head>
<body>
<div class="source-html-outer">
    <div id="source-html">
        <h1>
            <center>Artificial Intelligence</center>
        </h1>
        <h2>Lihat</h2>
        <p>
            Artificial Intelligence (AI) adalah teknologi baru yang menunjukkan kecerdasan mesin. Sub studi seperti <u><i>Neural Networks, Robatics atau Machine Learning</i></u> adalah bagian dari AI. Teknologi ini diharapkan menjadi bagian utama dari dunia nyata di semua tingkatan.

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

<html>

<head>

<title>How to Export HTML to Word Document with JavaScript</title>

</head>

<body>

<h1>

<center>Artificial Intelligence</center>

</h1>

<h2>Lihat</h2>

<p>

Artificial Intelligence (AI) adalah teknologi baru yang menunjukkan kecerdasan mesin. Sub studi seperti <u><i>Neural Networks, Robatics atau Machine Learning</i></u> adalah bagian dari AI. Teknologi ini diharapkan menjadi bagian utama dari dunia nyata di semua tingkatan.

</p>

</div>

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

doc</button>

</div>

</body>

</html>

Berikut fungsi CSS dari HTML di atas

<style>
body {
    width: 550px;
    font-family: Arial;
    line-height: 25px;
}

#btn-export {
    background: #484848;
    color: #FFF;
    border: #000 1px solid;
    padding: 10px 20px;
    font-size: 12px;
    border-radius: 3px;
}

.content-footer {
    text-align: center;
}
.source-html-outer {
    border: #d0d0d0 1px solid;
    border-radius: 3px;
    padding: 10px 20px 20px 20px;
}
</style>

<style>

body {

width: 550px;

font-family: Arial;

line-height: 25px;

}

#btn-export {

background: #484848;

color: #FFF;

border: #000 1px solid;

padding: 10px 20px;

font-size: 12px;

border-radius: 3px;

}

.content-footer {

text-align: center;

}

.source-html-outer {

border: #d0d0d0 1px solid;

border-radius: 3px;

padding: 10px 20px 20px 20px;

}

</style>

Fungsi JavaScript untuk Mengkonversi Dokumen HTML

Kode di bawah ini menunjukkan fungsi JavaScript yang digunakan untuk membuat data Source HTML dengan header, body dan footer. Bagian header adalah untuk menentukan namespace yang diperlukan dan charset. Dengan spesifikasi ini, Source 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 kata 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>

berikut hasil dari contoh Cara Mengekspor HTML ke Dokumen Word,

Oke itulah tadi pembahasan saya semoga bermanfaat.

Cara Mengekspor HTML ke Dokumen Word

Facebook DUMET School

Konsultasi Gratis

Categories