Skip to content

Instantly share code, notes, and snippets.

@usimsek

usimsek/export-word.html

Created June 16, 2022 09:29
Show Gist options
  • Save usimsek/06e65168de248c236eadbce7ad247374 to your computer and use it in GitHub Desktop.
Save usimsek/06e65168de248c236eadbce7ad247374 to your computer and use it in GitHub Desktop.
Download ZIP
export word
Raw
export-word.html
<!DOCTYPE html>
<html>
<head>
<style id="table_style">
td, th {
border: 1px solid #333;
}
</style>
</head>
<body>
<h1> Print</h1>
<input type="button" onclick="PrintTable();" value="Print" />
<div id="dvContents">
<table cellpadding="1" cellspacing="0" style="height:128px;width:225px;" id="printTable">
<tbody>
<tr>
<td class="border" colspan="2" style="text-align: center;"><span style="font-size:12px;">Şemsettin Ali</span></td>
</tr>
<tr>
<td class="border" colspan="2"><span style="font-size:12px;">41 FD 000 B-4009 (&Ouml;z NVP Koop)</span></td>
</tr>
<tr>
<td class="border" colspan="2" style="text-align: center;"><span style="font-size:12px;">Mernis Adresi</span></td>
</tr>
<tr>
<td class="border" colspan="2"><span style="font-size:12px;">OSMANGAZİ MAH. Darıca/Kocaeli</span></td>
</tr>
<tr>
<td colspan="2"><span style="font-size:12px;">Tebliğ Konusu Savunma Talebi</span></td>
</tr>
<tr>
<td class="border"><span style="font-size:12px;">ihlal Tar.:06.12.2022</span></td>
<td><span style="font-size:12px;">Varaka No:81665</span></td>
</tr>
<tr>
<td class="border"><span style="font-size:12px;">Evrak Tar.:06.12.2022</span></td>
<td class="border"><span style="font-size:12px;">Evrak No:789654</span></td>
</tr>
</tbody>
</table>
</div>
<h1>Word1</h1>
<button onclick="Export2Word('exportContent', 'word-content');">Export as .doc</button>
<div id="exportContent">
<table cellpadding="1" cellspacing="0" style="height:128px;width:225px;">
<tbody>
<tr>
<td class="border" colspan="2" style="text-align: center;"><span style="font-size:12px;">Şemsettin Ali</span></td>
</tr>
<tr>
<td class="border" colspan="2"><span style="font-size:12px;">41 DD 323 B-4009 (&Ouml;z NVB Koop)</span></td>
</tr>
<tr>
<td class="border" colspan="2" style="text-align: center;"><span style="font-size:12px;">Mernis Adresi</span></td>
</tr>
<tr>
<td class="border" colspan="2"><span style="font-size:12px;">OSMANGAZİ MAH. Kocaeli</span></td>
</tr>
<tr>
<td colspan="2"><span style="font-size:12px;">Tebliğ Konusu Savunma Talebi</span></td>
</tr>
<tr>
<td class="border"><span style="font-size:12px;">ihlal Tar.:06.12.2022</span></td>
<td><span style="font-size:12px;">Varaka No:81665</span></td>
</tr>
<tr>
<td class="border"><span style="font-size:12px;">Evrak Tar.:06.12.2022</span></td>
<td class="border"><span style="font-size:12px;">Evrak No:456789</span></td>
</tr>
</tbody>
</table>
</div>
<h1>Word2</h1>
<button id="export">Export</button> Click to open table in Microsoft Word
<div id="docx">
<div class="WordSection1">
<table cellpadding="1" cellspacing="0" style="height:128px;width:225px;">
<tbody>
<tr>
<td class="border" colspan="2" style="text-align: center;"><span style="font-size:12px;">Şemsettin Alş</span></td>
</tr>
<tr>
<td class="border" colspan="2"><span style="font-size:12px;">41 GFg 456 B-4009 (&Ouml;z Koop)</span></td>
</tr>
<tr>
<td class="border" colspan="2" style="text-align: center;"><span style="font-size:12px;">Mernis Adresi</span></td>
</tr>
<tr>
<td class="border" colspan="2"><span style="font-size:12px;">OSMANGAZİ MAH. /Kocaeli</span></td>
</tr>
<tr>
<td colspan="2"><span style="font-size:12px;">Tebliğ Konusu Savunma Talebi</span></td>
</tr>
<tr>
<td class="border"><span style="font-size:12px;">ihlal Tar.:06.12.2022</span></td>
<td><span style="font-size:12px;">Varaka No:789</span></td>
</tr>
<tr>
<td class="border"><span style="font-size:12px;">Evrak Tar.:06.12.2022</span></td>
<td class="border"><span style="font-size:12px;">Evrak No:7894</span></td>
</tr>
</tbody>
</table>
</div>
</div>
<script type="text/javascript">
//word2
window.export.onclick = function () {
if (!window.Blob) {
alert('Your legacy browser does not support this action.');
return;
}
var html, link, blob, url, css;
// EU A4 use: size: 841.95pt 595.35pt;
// US Letter use: size:11.0in 8.5in;
css = (
'<style>' +
'@page WordSection1{size: 8cm 5cm;mso-page-orientation: landscape;}' +
'div.WordSection1 {page: WordSection1;}' +
'table{border-collapse:collapse;}td{border:1px gray solid;width:5em;padding:2px;}' +
'</style>'
);
html = window.docx.innerHTML;
blob = new Blob(['\ufeff', css + html], {
type: 'application/msword'
});
url = URL.createObjectURL(blob);
link = document.createElement('A');
link.href = url;
// Set default file name.
// Word will append file extension - do not add an extension here.
link.download = 'Document';
document.body.appendChild(link);
if (navigator.msSaveOrOpenBlob) navigator.msSaveOrOpenBlob(blob, 'Document.doc'); // IE10-11
else link.click(); // other browsers
document.body.removeChild(link);
};
//word1
function Export2Word(element, filename = '') {
var preHtml = "<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>Etiket</title></head><body>";
var postHtml = "</body></html>";
var html = preHtml + document.getElementById(element).innerHTML + postHtml;
var blob = new Blob(['\ufeff', html], {
type: 'application/msword'
});
// Specify link url
var url = 'data:application/vnd.ms-word;charset=utf-8,' + encodeURIComponent(html);
// Specify file name
filename = filename ? filename + '.doc' : 'etiket.doc';
// Create download link element
var downloadLink = document.createElement("a");
document.body.appendChild(downloadLink);
if (navigator.msSaveOrOpenBlob) {
navigator.msSaveOrOpenBlob(blob, filename);
} else {
// Create a link to the file
downloadLink.href = url;
// Setting the file name
downloadLink.download = filename;
//triggering the function
downloadLink.click();
}
document.body.removeChild(downloadLink);
}
//print
function PrintTable() {
var printWindow = window.open('', '', 'height=600,width=600');
printWindow.document.write('<html><head><title>Table Contents</title>');
// Print the Table CSS.
var table_style = document.getElementById("table_style").innerHTML;
printWindow.document.write('<style type = "text/css">');
printWindow.document.write(table_style);
printWindow.document.write('</style>');
printWindow.document.write('</head>');
//Print the DIV contents i.e. the HTML Table.
printWindow.document.write('<body>');
var divContents = document.getElementById("dvContents").innerHTML;
printWindow.document.write(divContents);
printWindow.document.write('</body>');
printWindow.document.write('</html>');
printWindow.document.close();
printWindow.print();
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment