HTML button to save div content using javascript - javascript

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

Related

Combine userinput and predefined phrase into url (to write into dom)

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>

Tampermonkey JavaScript jQuery how to find and edit elements of an embedded web page?

How to access a web page after having embedded it into a div? Trying normally just returns null. Here's an example of what I mean:
var replaceThis = document.querySelector('.div1');
var withThis = document.querySelector('.div2 a').getAttribute("href");
replaceThis.innerHTML = '<object type="text/html" data="' + withThis + '" style="width: -webkit-fill-available; height: -webkit-fill-available;"></object>';
var thingFromEmbeddedSite = document.querySelector('.div2'); //returns div2
console.log(thingFromEmbeddedSite);
thingFromEmbeddedSite = document.querySelector('h2'); //returns null
console.log(thingFromEmbeddedSite);
https://jsfiddle.net/zhhL9rjr/3/
You would have to wait for the content to load and then access the content, i have made a small update to your fiddle, it does not work in there due to cross-origin.
HTML:
<body>
<div class="div1">
stuff
</div>
<div class="div2">
link
</div>
</body>
JS:
function embed(src, target){
return new Promise(function(resolve, reject){
let iframe = document.createElement("iframe");
iframe.src = src;
iframe.style = "width: -webkit-fill-available;height: -webkit-fill-available;";
iframe.onload = function(){
resolve(iframe.contentWindow.document);
};
target.parentNode.replaceChild(iframe, target);
});
}
let href = document.querySelector('.div2 a').getAttribute("href"),
target = document.querySelector('.div1');
embed(href, target).then(function(doc){
console.log( doc.querySelector('h2') );
});
https://jsfiddle.net/zhhL9rjr/6/
but should work if you load something from the same domain.

save the content of HTML editor as an HTML file on desktop

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>

How to load image on onload with javascript?

I am new with HTML and JavaScript. I am trying to load image using onload event through JavaScript.
My code is as below:
<script>
function createImage() {
('testimonialhulk').src='photo.jpg';
</script>
and the HTML is
<body onload="createImage()">
<div class="testimonialhulk">
</div>
</body>
</html>
I have to display image in div tag.
This works in my jsfiddle
<body onload="createImage();">
<div id="testimonialhulk">
Hello
</div>
</body>
Js:
function createImage()
{
var myElement = document.getElementById("testimonialhulk");
myElement.style.backgroundImage = "url('https://placehold.it/350x150')";
}
JS fiddle
https://jsfiddle.net/wuskc68d/1/
Try this
function createImage() {
var par = document.getElementsByClassName("testimonialhulk")[0];
var img = document.createElement('img');
img.src = 'put path here';
par.appendChild(img);
}
or use <div id="testimonialhulk">
document.getElementById('testimonialhulk')
.innerHTML = '<img src="imageName.png" />';

Prompt user to download output as txt file

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>

Categories

Resources