I am trying to generate a vCard .vcf file and download it on click. It works perfectly for all browsers except Safari. On safari, it downloads example.com instead of the proper file. I read a lot about the Safari download attribute issue, but it seems this is not the problem in my case. Any help would be highly appreciated.
This is my crappy code :)
let vCard = document.querySelector('.vcard')
let vcard_start ="BEGIN:VCARD\nVERSION:3.0\n"
let vcard_end = "END:VCARD"
let fullName = document.querySelector('#fullname').innerText
//let firstName = document.querySelector('#firstname').innerText
//let lastName = document.querySelector('#lastname').innerText
let title = document.querySelector('#title').innerText
let email = document.querySelector('#email').innerText
let phone = document.querySelector('#phone').innerText
let address = document.querySelector('#address').innerText
let vcard_download = document.querySelector('#vcard-download')
let currentURL = window.location.href
let attPhoto = document.querySelector('#att_image')
let attPhotoSRC = attPhoto.querySelector('img').src
let splitName = fullName.split(' ')
//let vCardPhoto =
//const space = split(/\r?\n/);
let vcardReady
let newName
if(splitName.length>=3){
newName = splitName[2] + ';' + splitName[0] + ' ' + splitName[1]
}else{
newName = splitName[1] + ';' + splitName[0]
}
function download(filename, text) {
var element = document.createElement('a');
element.setAttribute('href','data:text/vcard;charset=utf-8,' + encodeURIComponent(text));
element.setAttribute('download', filename);
element.style.display = 'none';
document.body.appendChild(element);
element.click();
document.body.removeChild(element);
}
let base64_image_encoded;
window.addEventListener('load',function(){
// Start file download.
vcard_download.addEventListener("click", function(){
const tmp = base64_image_encoded.split(",");
// Generate download of vCard file with some content
vcardReady = vcard_start+
"FN:"+fullName+ "\n" +
"N:" + newName + "\n" +
"EMAIL:" + email + "\n" +
"ORG:Carella, Byrne, Cecchi, Brody & Agnello, P.C\n" +
"ROLE:" + title + "\n" +
"TEL;TYPE=WORK;VOICE:" + phone + "\n" +
"URL:" + currentURL + "\n" +
"PHOTO;TYPE=JPEG;ENCODING=BASE64:"+ tmp[1] + "\n" +
"NOTE;CHARSET=us-ascii;ENCODING=QUOTED-PRINTABLE:" + "\n" +
vcard_end;
var text = vcardReady;
var filename = fullName+'.vcf';
download(filename, text);
});
toDataURL(attPhotoSRC, function (dataUrl) {
base64_image_encoded = dataUrl;
});
});
function toDataURL(src, callback, outputFormat) {
let image = new Image();
image.crossOrigin = 'Anonymous';
image.onload = function () {
let canvas = document.createElement('canvas');
let ctx = canvas.getContext('2d');
let dataURL;
canvas.height = this.naturalHeight;
canvas.width = this.naturalWidth;
ctx.drawImage(this, 0, 0);
dataURL = canvas.toDataURL(outputFormat);
callback(dataURL);
};
image.src = src;
if (image.complete || image.complete === undefined) {
image.src = "data:image/gif;base64, R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==";
image.src = src;
}
return image;
}
I have seen this issue when there was a newline character in the filename for Safari. Removing that newline did the trick for me
Related
i want to save chart html to word file as image
but word file can download but chart image is just X image it means doesn't have data
could you give me solution
function ExportToDoc(filename = "") {
html2canvas(document.getElementById("pyramid")).then((canvas) => {
canvas.toBlob((blob) => {
if (blob) {
myBlob = blob;
}
});
});
var HtmlHead =
"<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 Doc</title></head><body>";
var EndHtml = "</body></html>";
//complete html
// var html = HtmlHead + document.getElementById("pyramid").innerHTML + EndHtml;
var html =
HtmlHead +
"<img src='" +
URL.createObjectURL(
new Blob(new Uint8Array(myBlob), { type: "image/png" })
) +
"'/>" +
EndHtml;
// "<div id='export'><img class='hide' src='" + URLObj.createObjectURL() +"'/></div>"
//specify the type
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" : "document.doc";
// Create download link element
var downloadLink = document.createElement("a");
document.body.appendChild(downloadLink);
if (navigator.msSaveOrOpenBlob) {
navigator.msSaveOrOpenBlob(blob, filename);
} else {
downloadLink.href = url;
downloadLink.download = filename;
downloadLink.click();
}
document.body.removeChild(downloadLink);
}
enter image description here
for HTML
<Chart
id="pyramid"
...
</Chart>
chart is working well
function ExportToDoc(filename = "") {
var img = new Image();
html2canvas(document.getElementById("pyramid")).then((canvas) => {
img.src = canvas.toDataURL();
var HtmlHead =
"<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 Doc</title></head><body>";
var EndHtml = "</body></html>";
var html =
HtmlHead + "<img class='hide' src='" + img.src + "'/>" + EndHtml;
var blob = new Blob(["\ufeff", html], {
type: "application/msword",
});
var url =
"data:application/vnd.ms-word;charset=utf-8," +
encodeURIComponent(html);
filename = filename ? filename + ".doc" : "Document.doc";
var downloadLink = document.createElement("a");
document.body.appendChild(downloadLink);
if (navigator.msSaveOrOpenBlob) {
navigator.msSaveOrOpenBlob(blob, filename);
} else {
downloadLink.href = url;
downloadLink.download = filename;
downloadLink.click();
}
document.body.removeChild(downloadLink);
});
}
I solved it by myself.
Also upgraded:
function htmlToFile(element, file = "hwp") {
var img = new Image();
html2canvas(document.getElementById("pyramid")).then((canvas) => {
img.src = canvas.toDataURL();
var header = "<html><head><meta charset='utf-8'></head><body>";
var footer = "</body></html>";
var sourceHTML =
header + "<img class='hide' src='" + img.src + "'/>" + 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." + file;
fileDownload.click();
document.body.removeChild(fileDownload);
});
}
let NewName= params.strdocumentname + "(" + results.rows[0].arrayfilecount+ ")";
strdocumentname = params.strdocumentname = NewName;
the current output is Jayson.png(2)
desired output Jayson (2).png
How do i do that using the code above?
Use the following code:-
const path = require('path');
const extension= path.extname(params.strdocumentname);
const name= params.strdocumentname.replace(extension,"(" + results.rows[0].arrayfilecount+ ")");
const newName = name + extension;
Hope it helps
Thanks
I think your params.strdocumentname contains the extension of the file also.
Try this code;
let [fileName, extension] = params.strdocumentname.split('.');
let NewName= fileName + "(" + results.rows[0].arrayfilecount+ ")." + extension;
strdocumentname = params.strdocumentname = NewName;
see working fiddle
let mockFileName = "abc.png"
let mockArrayCount = '1'
let [fileName, extension] = mockFileName.split('.');
let NewName= fileName + "(" + mockArrayCount+ ")." + extension;
console.log(NewName)
alert(NewName)
I am writing a REST client to remote api. And I am using xmlHTTPRequest to get information about images.I need to refresh my images in every 30 seconds. My implementation of setTimeout function doesn't work. Anyone can help me? Thank you in advance.
Here is my code: Image.js
function Camera(id, name, ip, port) {
var button = document.createElement("button");
button.classList.add("camera");
button.innerHTML += "<h3>" + name + "</h3><br>";
var ismin = true;
this.id = id;
this.name = name;
this.ip = ip;
this.port = port;
this.getURL = function getURL(min) {
var url = 'http://' + ip + ":8080/api";
return min ? url + '/miniature/' + id + '?t=' + new Date().getTime() : url + '/image/' + id + '?t=' + new Date().getTime();
};
this.appendImg = function appendImg(url) {
button.innerHTML = "<h3>" + name + '</h3><br><img src="' + url + '"/>';
setTimeout(appendImg(url),30000);
};
this.showElement = function showElement(url) {
this.appendImg(url);
var that = this;
document.querySelector('#camera-section').appendChild(button);
button.addEventListener('click', function () {
ismin = !ismin;
that.appendImg(that.getURL(ismin), false);
});
};}
And a part of main.js:
function showImage(response) {
response = JSON.parse(sessionStorage.getItem('camera'));
console.log(response);
for (var i = 0; i < response.length; i++) {
var a = response[i];
var camera = new Camera(a.cameraId, a.name, ip, port, true);
var curl = camera.getURL(true);
camera.showElement(curl);
}
}
xml.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200) {
var response = JSON.parse(this.responseText);
sessionStorage.setItem('camera',JSON.stringify(response));
//console.log(sessionStorage.getItem('camera'));
showImage(sessionStorage.getItem('camera'));
}
};
xml.open('GET', mainUrl);
xml.send(null);
Regarding the comment of Pranay Kumar, first part of your code could be like this::
function Camera(id, name, ip, port) {
var button = document.createElement("button");
button.classList.add("camera");
button.innerHTML += "<h3>" + name + "</h3><br>";
var ismin = true;
this.id = id;
this.name = name;
this.ip = ip;
this.port = port;
this.getURL = function getURL(min) {
var url = 'http://' + ip + ":8080/api";
return min ? url + '/miniature/' + id + '?t=' + new Date().getTime() : url + '/image/' + id + '?t=' + new Date().getTime();
};
this._appendImg = function(url) {
return function() {
button.innerHTML = "<h3>" + name + '</h3><br><img src="' + url + '"/>';
}
};
this._timerHandle = 0;
this.appendImg = function(url) {
if (this._timerHandle) {
clearInterval(this._timerHandle);
}
this._timerHandle = setInterval(this._appendImg(url),30000);
}
this.showElement = function showElement(url) {
this.appendImg(url);
var that = this;
document.querySelector('#camera-section').appendChild(button);
button.addEventListener('click', function () {
ismin = !ismin;
that.appendImg(that.getURL(ismin), false);
});
}
}
You want refresh image every 30 seconds.
So use setInterval instead of setTimeout
<script type="text/javascript">
$(document).ready(function () {
//getting values of current time for generating the file name
$(".toExcelButton").click(function(){
var dt = new Date();
var day = dt.getDate();
var month = dt.getMonth() + 1;
var year = dt.getFullYear();
var hour = dt.getHours();
var mins = dt.getMinutes();
var postfix = day + "." + month + "." + year + "_" + hour + "." + mins;
//creating a temporary HTML link element (they support setting file names)
var a = document.createElement('a');
//getting data from our div that contains the HTML table
var data_type = 'data:application/vnd.ms-excel';
var table_div = document.getElementById('dvData');
var table_html = table_div.outerHTML.replace(/ /g, '%20');
a.href = data_type + ', ' + table_html;
//setting the file name
a.download = 'exported_table_' + postfix + '.xls';
//triggering the function
a.click();
//just in case, prevent default behaviour
e.preventDefault();
})
});
</script>
Need to export div tables to excel. The above code works fine in Chrome but not working in IE. Can anyone help me out on the same.
In IE a dynamically created anchor tag needs to be added to the DOM to execute its click event. Furthermore the download attribute is not supported in the IE:
Download attribute on A tag not working in IE
Edit:
Recently I posted many answers handling this issue, here are two of those:
image does not download with it's own extension
JS Base64 string to downloadable pdf - Edge
Basically you have to use msSaveOrOpenBlob() in IE:
var tF = 'Whatever.xls';
var tB = new Blob(..);
if(window.top.navigator.msSaveOrOpenBlob){
//Store Blob in IE
window.top.navigator.msSaveOrOpenBlob(tB, tF)
}
else{
//Store Blob in others
var tA = document.body.appendChild(document.createElement('a'));
tA.href = URL.createObjectURL(tB);
tA.download = tF;
tA.style.display = 'none';
tA.click();
tA.parentNode.removeChild(tA)
}
In the case above:
var tT = new XMLSerializer().serializeToString(document.querySelector('table')); //Serialised table
var tF = 'Whatever.xls'; //Filename
var tB = new Blob([tT]); //Blob
if(window.top.navigator.msSaveOrOpenBlob){
//Store Blob in IE
window.top.navigator.msSaveOrOpenBlob(tB, tF)
}
else{
//Store Blob in others
var tA = document.body.appendChild(document.createElement('a'));
tA.href = URL.createObjectURL(tB);
tA.download = tF;
tA.style.display = 'none';
tA.click();
tA.parentNode.removeChild(tA)
}
https://jsfiddle.net/23ao1v0s/1/
Please check the below given link. I think you will get a solution for your question
https://github.com/rainabba/jquery-table2excel
I would like to take one large file in javascript and read through it byte by byte and separate every other byte into one file or another but i can't seem to even print out a single byte from a .txt file
var control = document.getElementById("your-files");
files = control.files;
len = files.length;
var test = document.getElementById("test");
test.value = "Filename: " + files[0].name;
test.value += "\n" + "Type: " + files[0].type;
test.value += "\n" + "Size: " + files[0].size + " bytes";
var blob = files[0].slice(0, 1000);
test.value += "\n" + blob;
var myReader = new FileReader();
test.value += "\n" + myReader.readAsText(blob);
test.value += "\n" + myReader.readAsBinaryString(blob);
I can print out the file size type and name but trying to print a blob i get it listed as just an object blob
example
Filename: test.txt
Type: text/plain
Size: 9604 bytes
[object Blob]
undefined
All I need to do is to add the file creation now that I can actually use the blobs.
function SplitFile(){
var control = document.getElementById("your-files");
files = control.files;
len = files.length;
var test = document.getElementById("test");
var i = 0;
while (i < len){
test.value += i + "\n";
test.value += "Filename: " + files[i].name;
test.value += "\n" + "Type: " + files[i].type;
test.value += "\n" + "Size: " + files[i].size + " bytes";
num_files = document.getElementById("piece-up").value;
test.value += "\n" + "Number of files: " + num_files;
var file_length = files[i].size;
var slice_size = 1000;
var remainder = file_length % slice_size;
var num_large = file_length - remainder;
var num_loops = num_large / slice_size;
var slice_0 = 0;
var slice_1 = slice_size;
var q = 0;
while(q< num_loops){
var myReader = new FileReader();
myReader.readAsText(files[i].slice(slice_0, slice_1));
myReader.onload = function(event) {
var contents = event.target.result;
test.value += "\n" + contents;
};
slice_0 = slice_0 + slice_size;
slice_1 = slice_1 + slice_size;
q++;
}
var myReader = new FileReader();
slice_0 = slice_1 - slice_size;
slice_1 = slice_1 + remainder - slice_size;
myReader.readAsText(files[i].slice(slice_0, slice_1));
myReader.onload = function(event) {
var contents = event.target.result;
test.value += "\n" + contents;
};
i++;
}
}