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>
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>
In the following code there is a link:
<textarea placeholder="input" id="input"></textarea><br>
<input type="text" placeholder="file name" id="filename"/><br>
Export
<script>
var container = document.getElementById('input');
var anchor = document.getElementById('export');
anchor.onclick = function() {
anchor.href = 'data:text/plain;charset=utf-8,' + encodeURIComponent(container.value);
anchor.download = document.getElementById('filename').value;
};
</script>
How can I change the Export link into a button with the same id and fuction?
var hello = () => { // this is equal to write " var hello = function() { " and to write " function hello() { "
alert('hello')
}
.link {padding: 10px; color: white; background: #00ced1; text-decoration: none; border-radius: 5%}
.link:hover {opacity: 0.8}
<a class="link" href="#" onclick="hello()">Hello</a>
u can do something like this, (this is very simple, just an example)
however this is a very basic thing, please, first of posting a question consider reading the documentation
Change your anchor tag to a button.
<button id="export">Export</button>
Now, inside the onclick handler, create a anchor with the desired attributes, and invoke the click method on it. This way you gonna activate an anchor click when you click the button.
<script>
var container = document.getElementById('input');
var button = document.getElementById('export');
button.onclick = function() {
var anchor = document.createElement('a');
anchor.href = 'data:text/plain;charset=utf-8,' + encodeURIComponent(container.value);
anchor.download = document.getElementById('filename').value;
anchor.click();
};
</script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<textarea placeholder="input" id="input"></textarea><br>
<input type="text" placeholder="file name" id="filename"/><br>
Export
<script>
var container = document.getElementById('input');
var anchor = document.getElementById('export');
anchor.onclick = function() {
anchor.href = 'data:text/plain;charset=utf-8,' + encodeURIComponent(container.value);
anchor.download = document.getElementById('filename').value;
};
</script>
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>
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 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