I have been searching for hours for an answer here at stackoverflow and in the web. However all the answers I tried didn't work for me.
Basically, I would like to put an onclick event on an image map. the event is a java script function. When the user click on an area element it will download the text on the editor as a word file.
To illustrate what I'm trying to explain, here is the https://jsfiddle.net/00bk1zad/ with the code I made. I don't know what should I edit to make it working.
Thank you!
The code:
function txtdownload() {
console.log('called')
var textToSave = document.getElementById("editor").value;
var textToSaveAsBlob = new Blob([textToSave], {
type: "application/msword"
});
var textToSaveAsURL = window.URL.createObjectURL(textToSaveAsBlob);
var fileNameToSaveAs = "YouKtub.doc";
var downloadLink = document.createElement("a");
downloadLink.download = fileNameToSaveAs;
downloadLink.innerHTML = "Download File";
downloadLink.href = textToSaveAsURL;
downloadLink.onclick = destroyClickedElement;
downloadLink.style.display = "none";
document.body.appendChild(downloadLink);
downloadLink.click();
}
<div align=center>
<textarea id="editor" wrap="PHYSICAL" name="q" rows="9"></textarea>
</div>
<div>
<img src="https://image.ibb.co/eYKuFc/img.jpg" usemap="#map1Map" border=0>
</div>
<map name=map1Map> <area coords="268,46,47,113" href="#" onclick="txtdownload()"> </map>
I removed downloadLink.onclick = destroyClickedElement; and added document.body.removeChild(downloadLink); at the end. So when you press button and download file, the hidden link is destroyed. (Works in Chrome)
UPDATE: (now works in Firefox locally or on JSFiddle - stackoverflow codesnippet still doesn't work) In area tag I removed onclick="txtdownload()" and changed href="#" to href="javascript:txtdownload()". JSFiddle: https://jsfiddle.net/00bk1zad/2/
For future, you can use FileSaver.js. Check this link with examples: https://github.com/eligrey/FileSaver.js/
function txtdownload() {
var textToSave = document.getElementById("editor").value;
var textToSaveAsBlob = new Blob(
[textToSave],
{type:"application/msword"});
var textToSaveAsURL = window.URL.createObjectURL(textToSaveAsBlob);
var fileNameToSaveAs = "YouKtub.doc";
var downloadLink = document.createElement("a");
downloadLink.download = fileNameToSaveAs;
downloadLink.innerHTML = "Download File";
downloadLink.href = textToSaveAsURL;
downloadLink.style.display = "none";
document.body.appendChild(downloadLink);
downloadLink.click();
document.body.removeChild(downloadLink);
}
<div align=center>
<textarea id="editor" wrap="PHYSICAL" name="q" rows="9"></textarea>
</div>
<div>
<img src="https://image.ibb.co/eYKuFc/img.jpg" usemap="#map1Map" border=0>
</div>
<map name=map1Map>
<area coords="268,46,47,113" href="javascript:txtdownload()">
</map>
Related
I want to combine userinput from a textfield with a preset url,
to then form a new url that is to be written into the dom below after pressing a button
My current code looks like this:
<body>
<form>
<input type="text" id="pixivurl" value="4165980"/>
<input type="button" id="btn" value="pixivuserid"/>
</form>
<html>
<script type="text/javascript">
document.getElementById('btn').onclick = function() {
var val = document.getElementById('pixivurl').value,
src = ' val,
var link = document.getElementById("link");
var a = document.createElement('a');
var linkText = document.createTextNode("pixivuser");
a.appendChild(linkText);
a.title = "pixivuser";
a.href = "https://rsshub.app/pixiv/user/" + pixivuser";
document.body.appendChild(a);
}
</script>
</body>
</html>
The base url here is: https://rsshub.app/pixiv/user/
and it is supposed to have a numeral added right after, defined by userinpu.
(the default result in this case is https://rsshub.app/pixiv/user/4165980 )
I can't quite figure out the part to combine and then write into the dom below,
something might be missing ?
You just have some typing mistakes and then your code will work. The input with the id pixivurl has the user id. And you are getting it and assigning it to the href property of the link element. If you want the url to be also the text of the link element then put it in the textNode you have created.
<form>
<input type="text" id="pixivurl" value="4165980"/>
<input type="button" id="btn" value="pixivuserid"/>
</form>
<script type="text/javascript">
document.getElementById('btn').onclick = function() {
var val = document.getElementById('pixivurl').value;
var url = "https://rsshub.app/pixiv/user/" + val;
var a = document.createElement('a');
var linkText = document.createTextNode(url);
a.appendChild(linkText);
a.title = "pixivuser";
a.href = url;
a.style.display = 'block';
document.body.appendChild(a);
}
</script>
I am trying to add an image as an element into my webpage. I am unable to do so. There are instructions on how to preview an image, but I was unable to find a solution.
What I want it to do is to add a div with an image into the webpage and keep loading it with different images. So after I add image 1, I would load image 2 under image 1 in the same webpage.
html body code:
<input type='file' id='getval' /><br/><br/>
<span onclick="readURL()" class="addBtn">Add</span>
<div id="myUL"></div>
javascript code:
<script type="text/javascript">
// grabs image
var file = document.createElement('image');
file.src = document.getElementById('getval').files[0];
// creates div & assigns id
var div = document.createElement('div');
div.id = 'item';
// adds file to div
file.type = 'image';
div.appendChild(file);
//adds item
document.getElementById("myUL").appendChild(div);
}
</script>
edit1*
I think adding the output of the code I want to display would be better inside the html document.
javascript generates html code inside document:
<div style="background-image":url("image");"><div>
You can use this script
count = 0;
function viewImage(){
var imagefile = document.querySelector('#image');
if (imagefile.files && imagefile.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
var content = '<img id="temp_image_'+count+'" style="border: 1px solid; width: 107px;height:107px;" >';
document.querySelector('#all_images').innerHTML += content;
document.querySelector('#temp_image_'+count).setAttribute('src', e.target.result);
}; reader.readAsDataURL(imagefile.files[0]);
this.imagefile = imagefile.files[0];
count++;
}else{
console.log("Image not selected");
}
}
<div id="all_images">
</div>
<input id="image" name="image" type="file" onChange="viewImage()">
Here you go, although pay attention to the comment at line 3.
<script type="text/javascript">
var file = document.createElement("img");
file.setAttribute("src", document.getElementById('getval').files[0]); //You can use HTML5 File API here
file.setAttribute("height", "250");
file.setAttribute("width", "250");
var divTocreate = document.createElement('div');
divTocreate.id = 'item';
divTocreate.appendChild(file);
document.getElementById("myUL").appendChild(divTocreate);
</script>
I want to save the content of a TinyMce HTML editor by clicking on a button. The TinyMce is on a local installation, and I use it in Chrome.
I have see this answer and that one but I am not able to implement them.
When I click on the Save button, I don't get the download pop up, even though my code on JSfidle is working
So here is my TinyMCEnote.hmlt (save in desktop/TinyMceLocal)
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function saveTextAsFile()
{
var textToWrite = document.getElementById('textArea').value;
var textFileAsBlob = new Blob([textToWrite], {type:'text/plain'});
var fileNameToSaveAs = "ecc.plist";
var downloadLink = document.createElement("a");
downloadLink.download = fileNameToSaveAs;
downloadLink.innerHTML = "Download File";
downloadLink.href = window.webkitURL.createObjectURL(textFileAsBlob);
downloadLink.click();
}
var button = document.getElementById('save');
button.addEventListener('click', saveTextAsFile);
</script>
</head>
<body>
<textarea id = "textArea">
Notes here...
</textarea>
<button type="button" value="save" id="save"> Save</button>
</body>
</html>
I can not comment, but I want to help you a little.
When you run the code it seems like Event Code
var button = document.getElementById('save');
button.addEventListener('click', saveTextAsFile)
When I run the consle I get this error message:
Uncaught TypeError: Cannot read property 'addEventListener' of null
I am trying to know why its saying addEventListener is null .. You may know how to fix it since now you know what's causing the problem or someone with more experience.
Calling the function with onclick made the trick:
<!DOCTYPE html>
<html>
<head>
<script>
function saveTextAsFile()
{
var textToWrite = tinyMCE.activeEditor.getContent();
var textFileAsBlob = new Blob([textToWrite], {type:'text/plain'});
var fileNameToSaveAs = "note.html";
var downloadLink = document.createElement("a");
downloadLink.download = fileNameToSaveAs;
downloadLink.innerHTML = "Download File";
downloadLink.href = window.webkitURL.createObjectURL(textFileAsBlob);
downloadLink.click();
};
</script>
</head>
<body>
<textarea id = "textArea" cols="40" rows="40">
</textarea>
<button onclick="saveTextAsFile()">Save Note Content</button>
</body>
</html>
I'm looking for help w/ a script that will allow users to download the output from a text area (by prompting them to save it) by clicking on my "Export" button.
<textarea id="output" class="form-control text-box noresize" rows="4" placeholder="OUTPUT">
</textarea>
Closest I've gotten to an answer is this below, but obviously it's creating a file, not using my output:
var a = window.document.createElement('a');
a.href = window.URL.createObjectURL(new Blob(['Test,Text'], {type: 'text/csv'}));
a.download = 'test.csv';
// Append anchor to body.
document.body.appendChild(a)
a.click();
// Remove anchor from body
document.body.removeChild(a)
Any help would be greatly appreciated.
Using your method, just pass the value of the textarea into the createObjectURL function.
<textarea id="output" class="form-control text-box noresize" rows="4" placeholder="This text will be downloaded as a file.">
</textarea>
<br>
<button id="download">Download</button>
<script>
document.getElementById('download').addEventListener("click", download);
function download(){
var text = document.getElementById('output');
var a = window.document.createElement('a');
a.href = window.URL.createObjectURL(new Blob([text.value], {type: 'text/plain'}));
a.download = 'test.txt';
document.body.appendChild(a)
a.click();
document.body.removeChild(a)
}
</script>
Try this:
var txt = document.getElementById('content').value;
document.getElementById('link').onclick = function(){
this.href = 'data:text/plain;charset=utf-8,' + encodeURIComponent(txt);
};
document.getElementById('content').onchange = function(){
txt = document.getElementById('content').value;
};
<body>
<div>
<textarea id="content">Hello World</textarea>
</div>
Download
</body>
I need to save content of div using pure javascript.
I just edited one fiddle but I can't make it works :(
jsfiddle
<div id="content">
<h1>Hello world</h1>
<i>Hi everybody</i>
Download
function download(){
var a = document.body.appendChild(
document.createElement("a")
);
a.download = "export.html";
a.href = "data:text/html," + document.getElementById("content");
}
Close, you need innerHTML & trigger the click too:
function download(){
var a = document.body.appendChild(
document.createElement("a")
);
a.download = "export.html";
a.href = "data:text/html," + document.getElementById("content").innerHTML; // Grab the HTML
a.click(); // Trigger a click on the element
}
Working Fiddle
In your jsfiddle Java Script is configured to onLoad, which is why download() is not being invoked. Change it to No-Wrap, then you will be able invoke download() on onClick of the button.
update download() as
function download(){
var a = document.body.appendChild(
document.createElement("a")
);
a.download = "export.html";
a.href = "data:text/html," + document.getElementById("content").innerHTML;
a.click();
}
I agree with RGraham. However, if you use jQuery you can do it like this.
<div id="content">
<h1>Hello world</h1>
<i>Hi everybody</i>
</div>
<button class="download">Download</button>
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script>
$('.download').on('click', function(){
$('<a />').attr({
download: 'export.html',
href: "data:text/html," + $('#content').html()
})[0].click()
});
</script>
In jsfiddle, you can't run a javascript function inside of html events (like onClick) unless the javascript is contained in tags. (nevermind this)
Try this:
HTML
<div id="content">
<h1>Hello world</h1>
<i>Hi everybody</i>
</div>
<button id="download">Download</button>
JS
var download_button = document.getElementById('download');
download_button.onclick = download;
function download(){
var content = document.getElementById('content')
console.log(content);
}
updated jsfiddle