Cara Export HTML ke Word Dengan VueJS

Halo Sahabat Dumetschool, selamat datang kembali di website tips dan trik Dumet School. Pada kesempatan kali ini kita akan memberikan bagaimana Cara Membuat Export HTML ke Word Dengan VueJS. Aplikasi berbasis website tentu harus di sediakan fitur export file kedalam excel, pdf, word dsb, yang berfungsi untuk membantu menyajikan suatu laporan berupa data., kali ini saya akan memberikan referensi membuatnya menggunakan salah satu framework javascript, yaitu VueJS, jadi sahabat bisa memiliki banyak referensi dalam membuatnya. Untuk membuatnya silahkan sahabat simak step-step berikut ini

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Membuat Export HTML ke Word Dengan VueJS</title>
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
	<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css">
	<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.js"></script>
	
</head>
<body>

Pada code diatas saya menggunakan template bootstrap untuk mempermudah membuat tampilannya, serta menggunakan Icon dari Fontawesome dan jangan lupa library VueJS.

Selanjutnya ketikkan code struktur berikut ini yang berisi text area dan sebuah button

<div class="container mt-5">
		<div class="row">
			<div class="col-md-3"></div>
			<div class="col-md-6" id="app">
				
				<div class="form-group">
				    <label for="exampleFormControlTextarea1">Masukan Teks disini</label>
				    <textarea class="form-control" v-model="word" ref="word" name="text" id="text" rows="3"></textarea>
			  	</div>
			  	<button class="btn btn-primary p-2" @click="exportHTML" >Export To <i class="far fa-file-word"></i> </button>
			</div>
			<div class="col-md-3"></div>
		</div>
	</div>

dalam textarea diberikan sebuah v-model=”word” dan di button diberi event click @click=”exportHTML”.

Langkah selanjutnya code dari javascript yang digunakan sebagai berikut:

new Vue({
  data(){
    return{
      word: ''
    }
  },
  methods:{
    exportHTML(){
      var vm = this, word = `<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>${vm.word}</body></html>`;

      var source = 'data:application/vnd.ms-word;charset=utf-8,' + encodeURIComponent(word);
      var fileDownload = document.createElement("a");
      document.body.appendChild(fileDownload);
      fileDownload.href = source;
      fileDownload.download = 'hsl-file.doc';
      fileDownload.click();
      document.body.removeChild(fileDownload);
    }
  }
}).$mount('#app')

Jika sudah simpan semua file diatas lalu coba jalankan pada browser maka akan seperti tampilan dibawah ini :

Demikian pembahasan artikel kali ini semoga bermanfaat dan berjumpa lagi dengan artikel selanjutnya.

terima kasih.

Kategori