Javascript Dersleri

Javascript İle HTML Alanı Word’e Aktarma

Javascript kullanarak HTML çıktısını Word’e aktaracağız. Bu işlemi gerçekleştirirken herhangi bir eklenti yada dahili kütüphane kullanmayacağız. Direkt çıktı alanını oluşturup, dosya indirilmesini sağlayacağız. Belirlenen HTML alanın javascript kullanarak Word’e aktarılma işlemini gerçekleştireceğiz.

İçeriği Word dosyasına aktarmak için farklı yöntemlerde kullanılabilir. Örneğin, PHP ile word dosyası oluşturma ve aktarma işlemi gerçekleştirilebilir. Fakat bu işlem, PHP yoğunluğunu arttıracaktır. Yoğunluğu aynı dil üzerinden yürütmek yerine farklı yöntemlerle çıktı almak daha sağlıklı olacaktır. Javascript kullanarak en pratik Word dosyasının oluşturulmasından bahsedeceğim.

HTML’i Word Belgesine Aktarma

HTML bir alandaki verileri Microsoft Word belgesine dönüştürme ve .doc olarak kaydı alma işlemini gerçekleştireceğiz. Word belgesine aktarma işlemi için javascript’te bir fonksiyon oluşturacağız. Bu fonksiyon ile pratik bir şekilde Word çıktısı almış olacağız.

Aşağıdaki örnekte wordCevirici() fonksiyonu yer almaktadır. Bu fonksiyon sayesinde belirlenen HTML ID etiketi Word olarak çıktı alınacaktır. Fonksiyon iki adet parametre almaktadır. İlk parametrede Word’e aktarılacak olan HTML etiketi ID olarak alınmaktadır. İkinci parametrede ise dosya adı belirlenmiştir.

[table “14” not found /]

Oluşturduğumuz fonksiyon için gerekli açıklamaları yaptığımıza göre artık kodlara geçebiliriz.

function wordCevirici(element, dosyaAdi = ''){
   // HTML Yapısını oluşturuyoruz.
   var htmlUST       = "<html><head><meta charset='utf-8'>";
   var htmlStyle     = "<style>\
   .soyad{color:red}\
   </style>";
   var htmlOrta      = "</head><body>";
   var htmlSon       = "</body></html>";
   var icerik        = document.getElementById(element).innerHTML;
   var htmlBirlestir = htmlUST+htmlStyle+htmlOrta+icerik+htmlSon;
   // URL adresini oluşturduk.
   var urlAdresi     = "data:application/vnd.ms-word;charset=utf-8," + encodeURIComponent(htmlBirlestir);
   // Dosya adını kontrol edip .doc ekledik.
   dosyaAdi          = dosyaAdi ? dosyaAdi+".doc" : "yeniWord.doc";
   // İndirme Linkini oluşturup özellikleri girdik.
   var indirmeLinki  = document.createElement("a");
   indirmeLinki.href       = urlAdresi;
   indirmeLinki.download   = dosyaAdi;
   indirmeLinki.click();
   // İndirme linkini ekleyip, sildik.
   document.body.appendChild(indirmeLinki);
   documnet.body.removeChild(indirmeLinki);
}

Yukarıdaki fonksiyon ile belirlenen HTML alanın Word dosyasına aktarılması sağlanılacaktır. Kullanımını gerçekleştirmek için HTML bir alana ve bir BUTON ihtiyacımız olacak.

HTML İçerik

Fonksiyonun sağlıklı bir şekilde çalışması ve çıktının alınması için gerekli alanları oluşturacağız. İlk olarak içeriğin aktarılmasını istediğimiz DIV değerini oluşturalım.

<div id="wordAktar">
   ibrahim <span class="soyad">ÇEVRÜK</span>
</div>

Yukarıda yer alan wordAktar ID değerine sahip olan DIV etiketi fonksiyon ile alınıp, çıktısı verilecektir. Tabi bu işlemin gerçekleştirilmesi için bir butona ihtiyaç duyuluyor. Onu da hemen ekleyelim.

<button onclick="wordCevirici('wordAktar', 'ibrahimcevruk')">Word'e Aktar</button>

Yukarıdaki butonu da eklemekle birlikte, wordAktar alanı ibrahimcevruk.doc olarak Word ile çıktısı verilecektir. HTML bir alanı javascript ile çıktı almak bu kadar kolay. Bir çok projenizde kullanabilirsiniz. Kodlama dilinizi yormayacak ve Türkçe karakter sorunu yaşamadan STYLE ile özelleştirebileceğiniz bir uygulama geliştirmiş olacaksınız.

Geliştirilebilir Durumlar

Derste yer aldığı gibi kullanımın dışında bir çok özellikler de ekleyebilirsiniz. Örnek olarak aşağıdaki maddeleri inceleyebilirsiniz.

  • UTF-8 değerini dışarıdan alarak tüm dil gruplarına hitap edebilirsiniz.
  • STYLE bölümünü dışarıdan alarak dinamik bir STYLE alanı oluşturabilirsiniz.
  • Çıktı olarak .doc ve .docx seçenekleri getirilebilir.

Bu gibi yenilikler yapabilirsiniz. Yol göstermesi benden, geliştirmesi sizden.

Nasıl Buldunuz?

Komik
0
Uyyy
0
Sevdiim
0
Düşündürücü
0
Çalak
0

1 Comment

  1. İnternet explorer 11 ‘de çalışmıyor ne yazıkki, bu sorunu nasıl düzeltebiliriz

Leave a reply

E-posta hesabınız yayımlanmayacak.