এইচটিএমএল টেবিল পিডিএফ হিসাবে এক্সপোর্ট
প্রথমে jspdf এর cdn যোগ করতে হবে এরপর html এর যে অংশ পিডিএফ করতে চাচ্ছি তার id দিতে হবে content এবং যে বাটনে ক্লিক করলে এক্সপোর্ট হবে তার idদিতে হবে এক্সপোর্ট শেষে জাভা স্ক্রিপ্ট কোডটি রাখতে হবে। যদি html এর বাটন এবং কনটেন্ট এর id পরিবর্তনের দরকার পরে তবে ফাংশনের ভিতরে id এর প্যারামিটার পরিবর্তন করলেই হবে.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div class="w3-container" >
<table class="w3-table-all w3-small" id="content">
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Points</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>Adam</td>
<td>Johnson</td>
<td>67</td>
</tr>
</table>
</div>
<button id="export">Save</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.3/jspdf.min.js"></script>
<script>
document.getElementById('export').addEventListener('click',
exportPDF);
var specialElementHandlers = {
// element with id of "bypass" - jQuery style selector
'.no-export': function(element, renderer) {
// true = "handled elsewhere, bypass text extraction"
return true;
}
};
function exportPDF() {
var doc = new jsPDF('p', 'pt', 'a4');
//A4 - 595x842 pts
//https://www.gnu.org/software/gv/manual/html_node/Paper-Keywords-and-paper-size-in-points.html
//Html source
var source = document.getElementById('content').innerHTML;
var margins = {
top: 10,
bottom: 10,
left: 10,
width: 595
};
doc.fromHTML(
source, // HTML string or DOM elem ref.
margins.left,
margins.top, {
'width': margins.width,
'elementHandlers': specialElementHandlers
},
function(dispose) {
// dispose: object with X, Y of the last line add to the PDF
// this allow the insertion of new lines after html
doc.save('Test.pdf');
}, margins);
}
</script>
</body>
</html>
এইচটিএমএল টেবিল এক্সেল হিসাবে এক্সপোর্ট
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div class="w3-container" >
<table class="w3-table-all w3-small" id="content">
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Points</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>Adam</td>
<td>Johnson</td>
<td>67</td>
</tr>
</table>
</div>
<button onclick="exportToExcel('content')">Export Table Data To Excel File</button>
<script>
function exportToExcel(tableID, filename = ''){
var downloadurl;
var dataFileType = 'application/vnd.ms-excel';
var tableSelect = document.getElementById(tableID);
var tableHTMLData = tableSelect.outerHTML.replace(/ /g, '%20');
// Specify file name
filename = filename?filename+'.xls':'export_excel_data.xls';
// Create download link element
downloadurl = document.createElement("a");
document.body.appendChild(downloadurl);
if(navigator.msSaveOrOpenBlob){
var blob = new Blob(['\ufeff', tableHTMLData], {
type: dataFileType
});
navigator.msSaveOrOpenBlob( blob, filename);
}else{
// Create a link to the file
downloadurl.href = 'data:' + dataFileType + ', ' + tableHTMLData;
// Setting the file name
downloadurl.download = filename;
//triggering the function
downloadurl.click();
}
}
</script>
</body>
</html>
এইচটিএমএল টেবিল CSV হিসাবে এক্সপোর্ট
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div class="w3-container" >
<table class="w3-table-all w3-small" id="content">
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Points</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>Adam</td>
<td>Johnson</td>
<td>67</td>
</tr>
</table>
</div>
<button >Export Table Data To csv File</button>
<script>
function download_csv(csv, filename) {
var csvFile;
var downloadLink;
// CSV FILE
csvFile = new Blob([csv], {type: "text/csv"});
// Download link
downloadLink = document.createElement("a");
// File name
downloadLink.download = filename;
// We have to create a link to the file
downloadLink.href = window.URL.createObjectURL(csvFile);
// Make sure that the link is not displayed
downloadLink.style.display = "none";
// Add the link to your DOM
document.body.appendChild(downloadLink);
// Lanzamos
downloadLink.click();
}
function export_table_to_csv(html, filename) {
var csv = [];
var rows = document.querySelectorAll("table tr");
for (var i = 0; i < rows.length; i++) {
var row = [], cols = rows[i].querySelectorAll("td, th");
for (var j = 0; j < cols.length; j++)
row.push(cols[j].innerText);
csv.push(row.join(","));
}
// Download CSV
download_csv(csv.join("\n"), filename);
}
document.querySelector("button").addEventListener("click", function () {
var html = document.querySelector("table").outerHTML;
export_table_to_csv(html, "table.csv");
});
</script>
</body>
</html>
এইচটিএমএল টেবিল Ms Word Docsহিসাবে এক্সপোর্ট
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div class="w3-container" id="source-html" >
<table class="w3-table-all w3-small" id="content">
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Points</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>Adam</td>
<td>Johnson</td>
<td>67</td>
</tr>
</table>
</div>
<button id="btn-export" onclick="exportHTML();">Export to
word doc</button> <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>
</body>
</html>
OLEETECH 