I need to put a certain table into an Excel table.
I am using the solution to this question:
HTML Table to Excel Javascript
I left the JS unchanged, like this:
<script type="text/javascript">
var tableToExcel = (function () {
var uri = 'data:application/vnd.ms-excel;base64,'
, template = '<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40"><head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--></head><body><table>{table}</table></body></html>'
, base64 = function (s) { return window.btoa(unescape(encodeURIComponent(s))) }
, format = function (s, c) { return s.replace(/{(\w+)}/g, function (m, p) { return c[p]; }) }
return function (table, name, filename) {
if (!table.nodeType) table = document.getElementById(table)
var ctx = { worksheet: name || 'Worksheet', table: table.innerHTML }
document.getElementById("dlink").href = uri + base64(format(template, ctx));
document.getElementById("dlink").download = filename;
document.getElementById("dlink").click();
}
})()
</script>
This is the HTML I use to trigger the download:
The anchor:
<a id="dlink" href="#testTable" style="display:none;"></a>
The button:
<input type="button" onclick="tableToExcel('testTable', 'testTable', 'myExport.xls')" value="Export to Excel">
The table attributes:
<table data-name="testTable" id="testTable" summary="All members" rules="groups" frame="hsides" border="2">
Once I click the button, it opens Excel and gives me the following error:
'C:\users\username\AppData\Local\Temp\myExport.xls' could not be found. Check the spelling (insert rest of microsoft BLA here)
Any help appreciated!
Just found out the following:
IE == NOT EVEN WORKING
Chrome == Gives me file, but leaves some fields filled with the value 'тВм0'.
FireFox == 'C:\users\username\AppData\Local\Temp\myExport.xls' could not be found. Check the spelling (insert rest of microsoft BLA here)
Since this topic received 0 feedback i found this thread after searching a while.
html to excel export with .xls extension in javascript or php
This gave me the solution. I hope it helps others too.
Related
I have multiple image paths saved into the database in the same column. The image is saved in this sample in the database:
Two images are not uploaded every time (the highlighted is the multiple image upload example separated by comma). I am using Nodejs and am getting the image data with foreach on the ejs side (data is the output of the select statement on the index.ejs side
index.js
router.get('/homes', function (req, res, next) {
db.query("SELECT * FROM stocks", function (err, rs) {
if (err) {
console.log(err);
}
else {
res.render('homes', {data:rs})
}
});
});
<% data.forEach(function(item) { %>
<input type="hidden" id="desc" value="<%= item.image %>" />
<img id="pic1" class="pic-1" src = "" alt="image" >
<% }); %>
item.image value (input string you are getting from $('#desc').val()). It is just string format of the image path as the loop occurs.
MyImage-1591506118979.png
MyImage-1591507932201.jpg
photos-1591548210637.jpg,photos-1591548210640.png
MyImage-1591494888039.png
MyImage-1591505437596.jpg
MyImage-1591084895899.jpg
MyImage-1591085173153.jpg
MyImage-1590905192772.JPG
I am saving the image on my localhost server. I am doing the split and wanting to append the src in the script tag with the code below:
<script>
var desc = $('#desc').val();
var temp = new Array();
temp = desc.split(",");
var container = document.getElementById("container");
temp.forEach(function (imagepath) {
var img = document.createElement("img");
img.className = "class";
img.src = imagepath;
// div.innerText = text;
img.classList.add("li-added");
container.append(img);
});
document.getElementById("pic1").src= "/" + text;
</script>
I use the same format for split text and it works, but am not sure what am getting wrong in the image part. I will appreciate any assistance or any other way to achieve this. Thanks.
I still don't know exactly what you intend to do. However, I tried to tidy up your code. In the HTML I got rid of the non-unique IDs by replacing them with class attributes.
In your JavaScript code I replaced the lengthy vanilla-JavaScript expressions by suitable jquery expressions and avoided some (temporary) variables altogether. The following is valid HTML and working JavaScript but might not be what you intended:
// var desc = $('#desc').val();
var data=[{image:"MyImage-1591506118979.png"},
{image:"MyImage-1591507932201.jpg"},
{image:"photos-1591548210637.jpg,photos-1591548210640.png"},
{image:"MyImage-1591494888039.png"},
{image:"MyImage-1591505437596.jpg"},
{image:"MyImage-1591084895899.jpg"},
{image:"MyImage-1591085173153.jpg"},
{image:"MyImage-1590905192772.JPG"}];
$("#container").html(data.map(item=>
`<input type="text" class="desc" value="${item.image}" /><br>`
+ item.image.split(',').map(pth=>`<img class="pic1" src ="${pth}" alt="${pth}"><br>`)).join(''));
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container"></div>
I am using FileSaver.js where I need to convert HTML table to xls using AngularJS.
Works fine with all browser but issue with iOS device.
Any alternate solution or any other plugin that can be used?
The following Gist at Github shows you how to export an HTML table to Microsoft Excel.
myApp.factory('Excel',function($window){
var uri='data:application/vnd.ms-excel;base64,',
template='<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40"><head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--></head><body><table>{table}</table></body></html>',
base64=function(s){return $window.btoa(unescape(encodeURIComponent(s)));},
format=function(s,c){return s.replace(/{(\w+)}/g,function(m,p){return c[p];})};
return {
tableToExcel:function(tableId,worksheetName){
var table=$(tableId),
ctx={worksheet:worksheetName,table:table.html()},
href=uri+base64(format(template,ctx));
return href;
}
};
})
.controller('MyCtrl',function(Excel,$timeout){
$scope.exportToExcel=function(tableId){ // ex: '#my-table'
$scope.exportHref=Excel.tableToExcel(tableId,'sheet name');
$timeout(function(){location.href=$scope.fileData.exportHref;},100); // trigger download
}
});
And then call it for example like this:
<button class="btn btn-link" ng-click="exportToExcel('#table1')">
<span class="glyphicon glyphicon-share"></span> Export to Excel
</button>
I'm developing a web application.My App is using Javascript, PHP, HTML. I already done apply code to upload xlsx , attach it on screen .
Here's my Code
<script type="text/javascript" src="simple-excel.js"></script>
<table width=50% align="left" border=0 STYLE="border-collapse:collapse;">
<tr>
<td style="width:9.2%"><b>Load CSV file</b></td>
<td style="width:1%"><b>:</b></td>
<td style="width:15%"><input type="file" id="fileInputCSV" /></td>
</tr>
</table>
<table id="result"></table>
<script type="text/javascript">
// check browser support
// console.log(SimpleExcel.isSupportedBrowser);
var fileInputCSV = document.getElementById('fileInputCSV');
// when local file loaded
fileInputCSV.addEventListener('change', function (e) {
// parse as CSV
var file = e.target.files[0];
var csvParser = new SimpleExcel.Parser.CSV();
csvParser.setDelimiter(',');
csvParser.loadFile(file, function () {
// draw HTML table based on sheet data
var sheet = csvParser.getSheet();
var table = document.getElementById('result');
table.innerHTML = "";
sheet.forEach(function (el, i) {
var row = document.createElement('tr');
el.forEach(function (el, i) {
var cell = document.createElement('td');
cell.innerHTML = el.value;
row.appendChild(cell);
});
table.appendChild(row);
});
});
});
</script>
How do i supposed to do for add it into database?
The code you have is for load and parse the file in browser (client-side), if you want to insert the data of a XLSX file into a database like MySQL you need to upload the file to a server-side script (you said you are using PHP) and parse it using a library like PHPExcel.
You can use this PHPExcel Cheat Sheet to know how to parse the file.
If you need help creating the code to upload the file you can visit this link: PHP 5 File Upload.
I want to export data in my html table to an excel sheet using angularjs on abutton click. I tried a code, but in vain.i m getting the button click event triggered though but nothing else seems to happen
<table class="table table-bordered table-condensed table-hover table-striped" id="tableId">
<tr ng-repeat="mas in vm1 | orderBy:orderByField:reverseSort">
<td>{{::mas.contractNumber}} </td>
<td>{{::mas.planNumber}} </td>
<td>{{::mas.businessErrorMsg }} </td>
<td>{{::mas.systemErrorMsg}} </td>
</tr>
<button class="btn btn-link" ng-click="exportToExcel('#tableId')">
<span class="glyphicon glyphicon-share"></span>Export to Excel
</button>
//controller code
app.controller("ErrorDetailController", [
"$scope", "$location", "$routeParams", "messageService", "errorService", "repositoryService", , "sharedPageService",
function ($scope, $location, $routeParams, messageService, errorService, repositoryService,sharedPageService, **Excel, $timeout**) {
$scope.exportToExcel = function (tableId) { // ex: '#my-table'
debugger;
var exportHref = Excel.tableToExcel(tableId, 'sheet name');
$timeout(function () { location.href = exportHref; }, 100); // trigger download
}
}
]);
app.factory('Excel', function ($window) {
var uri = 'data:application/vnd.ms-excel;base64,',
template = '<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40"><head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--></head><body><table>{table}</table></body></html>',
base64 = function (s) { return $window.btoa(unescape(encodeURIComponent(s))); },
format = function (s, c) { return s.replace(/{(\w+)}/g, function (m, p) { return c[p]; }) };
return {
tableToExcel: function (tableId, worksheetName) {
var table = $(tableId),
ctx = { worksheet: worksheetName, table: table.html() },
href = uri + base64(format(template, ctx));
return href;
}
};
})
Use :
<body>{table}</body>
instead of :
<body><table>{table}</table></body> in template variable.
You can use the ng-table-to-csv module to export HTML tables into CSV files (that can be opened in Excel).
As given on the README of that repo, here is the usage:
Getting Started / Usage
Install module via bower (or download the files from the dist folder
in the repo):
shell bower install ng-table-to-csv --save
Add a reference to dist/ng-table-to-csv.js into your HTML pages.
Add ngTableToCsv as a dependency to your module:
js angular.module('your_app', ['ngTableToCsv']);
Add export-csv attribute directive on the table to define a new
csv object on the scope with generate() and link() functions on
them.
Options:
- Use the separator attribute to change the default comma separator into something else (like semicolon).
- Use the export-csv-ignore attribute to set the selector that will be used for prevent tr/th/td to be stringified.
To create an Export button from an anchro tag, use the generate()
and link() functions mentioned above from ng-click and ng-href
attributes of an anchor tag.
See below:
html
<a class="btn" title="Export Table" ng-click='csv.generate()' ng-href="{{ csv.link() }}"
download="myTable.csv">
<i class="glyphicon glyphicon-new-window"></i> Export
</a>
<table class="table table-bordered" export-csv="csv" separator=";">
<!-- table contents -->
</table>
I am currently trying to develop a small tool that changes certain elements in an html file - one of those elements is a "bulletproof CSS button" for email as seen in the following page:
Campaign Monitor
The commented block of code looks like this:
<!--[if mso]><v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://google.com" style="height:30px;v-text-anchor:middle;width:170px;" arcsize="9%" stroke="f" fillcolor="#34adb2"><w:anchorlock><center></center></w:anchorlock></v:roundrect><![endif]-->
Now, as you can see, such code contains an mso comment, I was wondering if there is any way to use Javascript to target this element and change the href attribute, I have tried alerting the commented elements on the page using the following code:
$(function() {
$("body").contents().filter(function(){
return this.nodeType == 8;
}).each(function(i, e){
alert(e.nodeValue);
});
});
So far this only alerts the native HTML comments and not the specific mso comment I'd like to change.
Is there any other way to target this comment? Any help will be greatly appreciated!
I wrote some simple codes in various scenarios, you can use one of them base witch you want. ;)
I tested them by IE 11
In these examples we have some HREFs value:
www.mysite. com << this is the default value
www.example.com << this is our new value
Now codes:
HTML
This:
<div id="mybtn">
Show me the button!
<!--[if mso]><v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://http://www.mySite. com" style="height:40px;v-text-anchor:middle;width:200px;" arcsize="10%" strokecolor="#1e3650" fill="t">
<v:fill type="tile" src="http://i.imgur.com/0xPEf.gif" color="#556270" />
<w:anchorlock/>
<center style="color:#ffffff;font-family:sans-serif;font-size:13px;font-weight:bold;">Show me the button!</center>
</v:roundrect><![endif]-->
</div>
Or this:
<div id="mybtn">
<!--[if mso]><v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://http://www.mySite. com" style="height:40px;v-text-anchor:middle;width:200px;" arcsize="10%" strokecolor="#1e3650" fill="t">
<v:fill type="tile" src="http://i.imgur.com/0xPEf.gif" color="#556270" />
<w:anchorlock/>
<center style="color:#ffffff;font-family:sans-serif;font-size:13px;font-weight:bold;">Show me the button!</center>
</v:roundrect><![endif]-->
Show me the button!
</div>
The codes state before running any scripts:
.
.
A) Javascript (just Changing HREF property of v:roundrect tag)
$("div#mybtn").contents().filter(
function(){
return this.nodeType == 8;
}).each(function(i,e){
if(i==0)
{
$(this)[0].data = replaceHrefWithNew($(this)[0].data,"http://www.example.com");
console.log($(this));
}
});
function replaceHrefWithNew(myMso,newHrefValue)
{
var newMso=myMso;
var indexOfStartHref=myMso.indexOf("href")+6;
if(indexOfStartHref>=6)
{
var indexOfEndHref=myMso.indexOf("\"",indexOfStartHref);
var part1=myMso.substring(0,indexOfStartHref);
var part2=myMso.substring(indexOfStartHref,indexOfEndHref);
var part3=myMso.substring(indexOfEndHref);
newMso= part1 + newHrefValue + part3;
}
alert(newMso);
return newMso;
}
Result after run Script A
.
.
B) Javascript (Changing HREF property of v:roundrect tag & A tag together)
$(document).ready(function(){
var webAddress="http://www.example.com";
$("div#mybtn").contents().filter(
function(){
return this.nodeType == 8;
}).each(function(i,e){
if(i==0)
{
$(this)[0].data = replaceHrefWithNew($(this)[0].data,webAddress);
console.log($(this));
}
});
$("div#mybtn").find('a:first').prop("href",webAddress);
});
function replaceHrefWithNew(myMso,newHrefValue)
{
var newMso=myMso;
var indexOfStartHref=myMso.indexOf("href")+6;
if(indexOfStartHref>=6)
{
var indexOfEndHref=myMso.indexOf("\"",indexOfStartHref);
var part1=myMso.substring(0,indexOfStartHref);
var part2=myMso.substring(indexOfStartHref,indexOfEndHref);
var part3=myMso.substring(indexOfEndHref);
newMso= part1 + newHrefValue + part3;
}
alert(newMso);
return newMso;
}
Result after run Script B
.
.
C) Javascript (Just changing HREF property A tag)
In this case you can simply use below jquery code:
$(document).ready(function(){
var webAddress="http://www.example.com";
$("div#mybtn").find('a:first').prop("href",webAddress);
});
Result after run Script C