I am trying to convert HTML to word (.docx) by using JavaScript. I am using this http://www.jqueryscript.net/other/Export-Html-To-Word-Document-With-Images-Using-jQuery-Word-Export-Plugin.html plug-in for conversion. But this one is just converting every thing inside the HTML file. i mean with head tag all elements even with some content inside. output file looks like this
Mime-Version: 1.0 Content-Base:
file:///home/userprofile/JsWs/sample.html Content-Type:
Multipart/related; boundary="NEXT.ITEM-BOUNDARY";type="text/html"
--NEXT.ITEM-BOUNDARY Content-Type: text/html; charset="utf-8" Content-Location: file:///home/userprofile/JsWs/sample.html
<p>this is going to be paragraph </p>
</body></html>
--NEXT.ITEM-BOUNDARY--
and my html is
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="FileSaver.js"></script>
<script src="jquery.wordexport.js"></script>
</head>
<body>
<script type="text/javascript">
jQuery(document).ready(function($) {
$("a.word-export").click(function(event) {
$("#export-content").wordExport();
});
});
</script>
<div id="export-content">
<p>this is going to be paragraph </p>
</div>
<a class="word-export" href="javascript:void(0)"> Export as .doc </a>
</body>
</html>
Help me out how can i convert content of HTML in word.
I don't believe this will open in Microsoft Word consistently on all devices. I've actually been working on a similar project googoose. It is meant to convert html to word documents as well. This does work for me on both my desktop and mobile phone version of Microsoft Word.
From my testing, Word will have problems with MIME header, and also the fact that there are no html, body tags, etc.
You should look into this project if you're still trying to do this. It should be supported for some time, as there's also a Wordpress Plugin that uses googoose, which is linked to on the readme. The default action is to download the document on page load, but you can set it to be run onClick. For example,
Just include jquery and this plugin.
<script type="text/javascript" src="http://github.com/aadel112/googoose/jquery.googoose.js"></script>
Then to invoke onClick
jQuery(document).ready(function($) {
$("a.word-export").click(function(event) {
$(document).googoose({
area: '#export-content'
});
});
});
With googoose you can include a table of contents, header, footer, automatic page numbering, etc. You can open the document up in Print view, set the margins, and page size. It's way more configurable than the referenced script, which is not configurable at all.
Try this,
function ConvertToHtml()
{
var div = document.createElement("div");
div.id = "export-content";
div.innerHTML = "<p>this is going to be paragraph </p>";
document.body.appendChild(div);
$("#export-content").wordExport();
}
Related
In my script i'm trying to get my Javascript script to return a URL, so I can use the URL as a background for the website.
Here is my code:
//background script
//backgrounds
Rblxscreenshot_zombietower = "http://saberman888etai.net/background_images/rblxscreenshot.png";
Rblxscreenshot_zombietower2 = "http://saberman888.netai.net/background_images/zombietower2.png";
Rblxscreenshot_deathrun = "http://saberman888.netai.net/background_images/deathrun_ice.png";
Rblxscreenshot_deathrun2 = "http://saberman888.netai.net/background_images/deathrun_lobby.png";
SCREENSHOTS = [
Rblxscreenshot_zombietower,
Rblxscreenshot_zombietower2,
Rblxscreenshot_deathrun2,
Rblxscreenshot_deathrun
];
function returnBackground(){
return SCREENSHOTS[Math.floor((Math.random() * SCREENSHOTS.length)+1)];
}
And here is my HTML code:
<!DOCTYPE html>
<head>
<title>Saberman888's Website</title>
<link rel="stylesheet" type="text/css" href="theme.css"/>
<script type="text/javascript" src="background.js"/>
</head>
<body style="background-image:url(<script src="http://saberman888.netai.com/background.js">returnBackground()</script>);">
<div class="box">
<div style="text-align:center;">
<h1>Home</h1>
Home
Conlangs
Projects
</div>
<hr>
<div id="minibox" style="margin-left:100px;">
<h2>Conlangs</h3>
<ul>
<li>Florrum</li>
<li>Genie</li>
</ul>
</div>
<div id="minibox" style="margin-left:100px;">
<h2>Projects</h2>
<ul>
<li>DLBOX</li>
<li>QuarryLang</li>
</ul>
</div>
<div id="links">
My Youtube
My DeviantArt
My Twitter
<a href="8.42.96.39/User.aspx?ID=49027085
">My Roblox</a>
My Github
</div>
</div>
</body>
</html>
As you can see, in the HTML code it uses the function returnBackground() to get a URL to use as a background, but the background doesn't show up, any reason why?
If you try to mod with the length of the array, it will be always inside the range. This issue looks like an out of range error in the line below:
function returnBackground(){
return SCREENSHOTS[Math.floor((Math.random() * SCREENSHOTS.length)+1)];
}
So replace it with:
function returnBackground(){
return SCREENSHOTS[Math.floor((Math.random() * SCREENSHOTS.length)+1) % SCREENSHOTS.length];
}
Update
Just saw a basic mistake, you cannot use a <script> tag or any other tag for that instance, inside an attribute. That's a syntax error:
<body style="background-image:url(<script src="http://saberman888.netai.com/background.js">returnBackground()</script>);">
You cannot set the background URL like that. Instead you need to this way:
<body onload="returnBackground();">
And in the returnBackground() should set the background in this way:
document.body.style.backgroundImage = url;
Your full returnBackground() function:
function returnBackground(){
document.body.style.backgroundImage = SCREENSHOTS[Math.floor((Math.random() * SCREENSHOTS.length)) % SCREENSHOTS.length];
}
The way you're trying to include the script is incorrect.
As per the HTML5 specification, a script tag has to contain either a src attribute or script content inside the tags, not both. (The only allowed content for a script tag with src specified is documentation, i.e. comments.)
Quote on the script element:
If there is a src attribute, the element must be either empty or contain only script documentation that also matches script content restrictions.
(This wasn't correct before HTML5 either, but (I think) it was more ill-defined, so it might work in some browsers, but don't rely on this.)
Also, the script tag cannot be inlined within a style (or any other) attribute.
For example, one of your better options is modifying the script to retrieve the body DOM element and manipulates its style, its background-image specifically (taking a more imperative approach). Then just include this script inside a script tag into your HTML.
Praveen Kumar's suggestion of adding an onload event handler is probably even easier, but the script include has to be fixed regardless of which path you choose.
I am fairly new to CSS and javascript. I have been trying to implement the Tagging system as provided in Taggle.js (http://sean.is/poppin/tags).
Using this script :
<html>
<body>
Hello!! <br>
<form id="form1" action="http://127.0.0.1:5000/post">
<fieldset>
Tags:
<div id ="freeTags" ></div>
<p id='tag'></p><br><br>
</fieldset>
</form>
<script src="./node_modules/taggle/assets/js/taggle.js"></script>
<script>
var text = document.getElementById('tag');
new Taggle('freeTags', {
onTagAdd: function(event, tag) {
text.innerHTML = "You just added " + tag;
},
onTagRemove: function(event, tag) {
text.innerHTML = "You just removed "+ tag;
},
duplicateTagClass : "bounce"
});
</script>
</body>
</html>
I am unable to get the same effect as on the website (fancy text box) instead what I have been getting is this:
And it is also not implementing the 'bounce' function although I installed bounce.js using bower.
I think it must be the issue of CSS linkage to HTML. Can any one help in untangling this issue?
The documentation for taggle says the bounce effect is handled by the taggle.css file ... which your code example above doesn't include. Suggest this file also deals with styling of the elements youve said are missing. So just link this file in your document and re - test.
Find the CSS file in the repo you link to above the folder assets/css/ (find here), and save either taggle.css or taggle.min.css (for production) to your server and add the following to your page immediately after the <html> opening tag...
<html>
<head>
<link rel="stylesheet" type="text/css" href="path/to/taggle.min.css">
</head>
<body>
<!-- your content... -->
</body>
</html>
I want to replace the current script tag with the HTML contents generated by the same script.
That is, my Page is
<html>
<body>
<div>
<script src="myfile1.js"></script>
</div>
<div>
<script src="myfile1.js"></script>
</div>
</body>
</html>
Inside each .js file corresponding html contents are generated. I want to put the contents as the innerHTML of the parent div. But can't set id for the parent div because the page is not static. So the current script tag must be replaced with the HTML content. How can I do this?
For each script tag src is the same. So can't identify with src. These scripts displays
some images with text randomly. Scripts are the same but displays different contents in divs on loading
Please help me
try inside of myfile1.js:
var scripts = document.getElementsByTagName( "script" );
for ( var i = 0; i < scripts.length; ++ i )
{
if ( scripts[i].src == "myfile1.js" )
{
scripts[i].parentNode.innerHTML = "new content";
}
}
This is a great question for those trying to implement a JSONP widget. The objective is to give the user the shortest possible amount of code.
The user prefers:
<script type="text/javscript" src="widget.js"></script>
Over:
<script type="text/javscript" src="widget.js"></script>
<div id="widget"></div>
Here's an example of how to achieve the first snippet:
TOP OF DOCUMENT<br />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
// inside of widget.js
document.write('<div id="widget"></div>');
$(document).ready(function() {
$.getJSON('http://test.com?remote_call=1', function(data) {
$('#widget').html(data);
});
});
<br />BOTTOM OF DOCUMENT
Have a look at: http://alexmarandon.com/articles/web_widget_jquery/ for the correct way to include a library inside of a script.
document.currentScript has been available since 2011 on Firefox and 2013 on Chrome.
document.currentScript documentation at MDN
<!DOCTYPE html>
<meta charset="UTF-8">
<title>currentScript test</title>
<h1>Test Begin</h1>
<script>
document.currentScript.outerHTML = "blah blah";
</script>
<h1>Test End</h1>
Unfortunately a running JavaScript file is not aware of where it is running. If you use document.write() in the script, the write function will take place wherever the script runs, which would be one way to accomplish what you want, but without replacing the contents or being able to perform any actions on the enclosing DIV.
I can't really envisage a situation where you'd have such stringent restrictions on building a page - surely if the page is dynamic you could generate identifiers for your DIV elements, or load content in a more traditional manner?
Why not use Smarty?
http://www.smarty.net/
You can use javascript in Smarty templates, or just use built-in functions.
Just take a look at http://www.smarty.net/crash_course
poof -- old answer gone.
Based on your last edit, here's what you want to do:
<html>
<head>
<!-- I recommend getting this from Google Ajax Libraries
You don't need this, but it makes my answer way shorter -->
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
function getRandomContent(){
// I expect this is the contents of your current script file.
// just package it into a function.
var rnd = Math.random();
return "[SomeHtml]";
}
$('.random').each(idx, el){
$(this).html(getRandomHtmlContent());
});
});
</script>
</head>
<body>
<div class="random">
</div>
<div class="random">
</div>
</body>
</html>
If you don't mind the script tag remaining in place you can use something as simple as document.write().
myfile1.js:
document.write("<p>some html generated inline by script</p>");
It will do exactly what you need.
When you execute following example using Firefox 3:
<html>
<head>
<script language="javascript" type="text/javascript">
<!--
function openWindow(){
var w = window.open('', 'otherWin', 'width=600,height=600');
w.document.write(document.getElementsByTagName("html")[0].innerHTML);
w.document.close();
reportLinks(w.document.links);
}
function reportLinks(links){
var report = 'links: '+links.length;
for (var i=0;i<links.length;i++){
report += '\n (link='+links[i].href+')';
}
alert(report);
}
//-->
</script>
</head>
<body>
<p>Open Same Content and Show Links Report</p>
<p>Show Links Report</p>
</body>
</html>
You will see that both the number of links shown when clicking on 'Show Links Report' as when clicking on 'Open Same Content and Show Links Report' will be 2. However when having an external JavaScript file reference from this page the behavior seems different (just make an empty file some.js if you want). When clicking 'Open Same Content and Show Links Report' the number of links will be 0.
<html>
<head>
<script language="javascript" type="text/javascript" src="some.js"></script>
<script language="javascript" type="text/javascript">
<!--
function openWindow(){
var w = window.open('', 'otherWin', 'width=600,height=600');
w.document.write(document.getElementsByTagName("html")[0].innerHTML);
w.document.close();
reportLinks(w.document.links);
}
function reportLinks(links){
var report = 'links: '+links.length;
for (var i=0;i<links.length;i++){
report += '\n (link='+links[i].href+')';
}
alert(report);
}
//-->
</script>
</head>
<body>
<p>Open Same Content and Show Links Report</p>
<p>Show Links Report</p>
</body>
</html>
It is probably a matter of loading the page and the moment that reportLinks executed exactly. I assume that the external some.js is added that the document is not completely build up. Is there a way that I can register this reportLinks call for onload event so that I can be sure that document.links is complete?
By the way the example works fine in both cases with Google Chrome.
(added after answer1)
As suggested by Marcel K. I rewrote the example, added also the code the way I really would like to have the thing going. And now testing it, and this simple example seems to work with Firefox and with Chrome.
<html>
<head>
<script type="text/javascript" src="some.js"></script>
<script type="text/javascript">
<!--
function openWindow(){
var w = window.open('', 'otherWin', 'width=600,height=600');
w.document.write('<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">\n<html>\n'+
document.getElementsByTagName("html")[0].innerHTML+'\n</html>');
w.onload=function(){
reportLinks(w.document.links);
};
w.document.close();
}
function reportLinks(links){
var report = 'links: '+links.length;
for (var i=0;i<links.length;i++){
report += '\n (link='+links[i].href+')';
}
alert(report);
}
//-->
</script>
</head>
<body>
<p>Open Same Content and Show Links Report</p>
<p>Show Links Report</p>
</body>
</html>
I had hoped with this simple example to show a simple case of the actual code I am writing. A print preview screen of complicated html in which I want to disable all hrefs once opened. But in that one the onload handler is never called... How can I register an onload handler in this case in the most robust way?
Many thanks,
Marcel
As I said in a comment, this is a very strange issue. But I think it happens because the inclusion of an external script causes a delay in page rendering (of the new page) and its DOM might not be ready to inspect.
My suspicion is supported by the fact that adding the (new) defer attribute seems to solve this issue:
This Boolean attribute is set to indicate to a browser that the script is meant to be executed after the document has been parsed.
The defer attribute can be set on the original page, as you want an exact copy of it. You can set it if it doesn't matter where a script is being included (e.g., when using document.write in your included file it does matter at which place you include it).
As defer is a Boolean attribute, it is activated when it is simply present (defer) or (when using XHTML) set to itself (defer="defer"). In your case, the script inclusion would read:
<script type="text/javascript" src="some.js" defer></script>
Update regarding your update: you should still insert a Doctype in the main page (consider using the HTML 5 one).
And I think the way you attached your onload event is the best you can do.
But considering the goal you want to achieve (a print preview without hyperlinks): you can also use the "print" media attribute and style hyperlinks like text; that's way more easy than the thing you are doing and it works when JavaScript is disabled.
The only way I could make the example above work portable over Firefox, Chrome and IE is by registering the onload listener through inlined JavaScript in the HTML loaded in the popup window. Following example code shows how.
<html>
<head>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<p>Open Same Content and Show Links Report</p>
<p>Show Links Report</p>
</body>
</html>
This page uses a script in script.js file. Following shows the content of that file.
function openWindow(){
var w = window.open('', 'otherWin', 'width=600,height=600');
w.document.write(
'<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">\n<html>\n'+
document.getElementsByTagName("html")[0].innerHTML+
'\n <script type="text/javascript">\n'+
' function addOnloadListener(listener){\n'+
' if (window.addEventListener) {\n'+
' window.addEventListener("load", listener, false);\n'+
' } else {\n'+
' window.attachEvent("onload",listener);\n'+
' }\n'+
' }\n'+
' addOnloadListener(function(){reportLinks(document.links);});\n'+
' </script>\n'+
'</html>');
w.document.close();
}
function reportLinks(links){
var report = 'links: '+links.length;
for (var i=0;i<links.length;i++){
report += '\n (link='+links[i].href+')';
}
alert(report);
}
When putting the function addOnloadListener directly in the JavaScript file (not inlined in the page) it doesn't work in IE6 because, I believe, it cannot handle the order of script entries correctly. When addOnloadListener was not inlined the inlined call to addOnloadListener didn't work, it simply couldn't find the function in the earlier:
<script type="text/javascript" src="script.js"></script>
The code is only a simple example that doesn't really do a lot. I used it for disabling all links in a print preview popup page.
A simpler way to register an onload listener for a popup window portable over browser is always welcome.
Thanks,
Marcel
Is there a tag in HTML that will only display its content if JavaScript is enabled? I know <noscript> works the opposite way around, displaying its HTML content when JavaScript is turned off. But I would like to only display a form on a site if JavaScript is available, telling them why they can't use the form if they don't have it.
The only way I know how to do this is with the document.write(); method in a script tag, and it seems a bit messy for large amounts of HTML.
Easiest way I can think of:
<html>
<head>
<noscript><style> .jsonly { display: none } </style></noscript>
</head>
<body>
<p class="jsonly">You are a JavaScript User!</p>
</body>
</html>
No document.write, no scripts, pure CSS.
You could have an invisible div that gets shown via JavaScript when the page loads.
I don't really agree with all the answers here about embedding the HTML beforehand and hiding it with CSS until it is again shown with JS. Even w/o JavaScript enabled, that node still exists in the DOM. True, most browsers (even accessibility browsers) will ignore it, but it still exists and there may be odd times when that comes back to bite you.
My preferred method would be to use jQuery to generate the content. If it will be a lot of content, then you can save it as an HTML fragment (just the HTML you will want to show and none of the html, body, head, etc. tags) then use jQuery's ajax functions to load it into the full page.
test.html
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
$.get('_test.html', function(html) {
$('p:first').after(html);
});
});
</script>
</head>
<body>
<p>This is content at the top of the page.</p>
<p>This is content at the bottom of the page.</p>
</body>
</html>
_test.html
<p>This is from an HTML fragment document</p>
result
<p>This is content at the top of the page.</p>
<p>This is from an HTML fragment document</p>
<p>This is content at the bottom of the page.</p>
First of all, always separate content, markup and behaviour!
Now, if you're using the jQuery library (you really should, it makes JavaScript a lot easier), the following code should do:
$(document).ready(function() {
$("body").addClass("js");
});
This will give you an additional class on the body when JS is enabled.
Now, in CSS, you can hide the area when the JS class is not available, and show the area when JS is available.
Alternatively, you can add no-js as the the default class to your body tag, and use this code:
$(document).ready(function() {
$("body").removeClass("no-js");
$("body").addClass("js");
});
Remember that it is still displayed if CSS is disabled.
I have a simple and flexible solution, somewhat similar to Will's (but with the added benefit of being valid html):
Give the body element a class of "jsOff". Remove (or replace) this with JavaScript. Have CSS to hide any elements with a class of "jsOnly" with a parent element with a class of "jsOff".
This means that if JavaScript is enabled, the "jsOff" class will be removed from the body. This will mean that elements with a class of "jsOnly" will not have a parent with a class of "jsOff" and so will not match the CSS selector that hides them, thus they will be shown.
If JavaScript is disabled, the "jsOff" class will not be removed from the body. Elements with "jsOnly" will have a parent with "jsOff" and so will match the CSS selector that hides them, thus they will be hidden.
Here's the code:
<html>
<head>
<!-- put this in a separate stylesheet -->
<style type="text/css">
.jsOff .jsOnly{
display:none;
}
</style>
</head>
<body class="jsOff">
<script type="text/javascript">
document.body.className = document.body.className.replace('jsOff','jsOn');
</script>
<noscript><p>Please enable JavaScript and then refresh the page.</p></noscript>
<p class="jsOnly">I am only shown if JS is enabled</p>
</body>
</html>
It's valid html. It is simple. It's flexible.
Just add the "jsOnly" class to any element that you want to only display when JS is enabled.
Please note that the JavaScript that removes the "jsOff" class should be executed as early as possible inside the body tag. It cannot be executed earlier, as the body tag will not be there yet. It should not be executed later as it will mean that elements with the "jsOnly" class may not be visible right away (as they will match the CSS selector that hides them until the "jsOff" class is removed from the body element).
This could also provide a mechanism for js-only styling (e.g. .jsOn .someClass{}) and no-js-only styling (e.g. .jsOff .someOtherClass{}). You could use it to provide an alternative to <noscript>:
.jsOn .noJsOnly{
display:none;
}
In the decade since this question was asked, the HIDDEN attribute was added to HTML. It allows one to directly hide elements without using CSS. As with CSS-based solutions, the element must be un-hidden by script:
<form hidden id=f>
Javascript is on, form is visible.<br>
<button>Click Me</button>
</form>
<script>
document.getElementById('f').hidden=false;
</script>
<noscript>
Javascript is off, but form is hidden, even when CSS is disabled.
</noscript>
You could also use Javascript to load content from another source file and output that. That may be a bit more black box-is than you're looking for though.
Here's an example for the hidden div way:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*[data-when-js-is-on] {
display: none;
}
</style>
<script>
document.getElementsByTagName("style")[0].textContent = "";
</script>
</head>
<body>
<div data-when-js-is-on>
JS is on.
</div>
</body>
</html>
(You'd probably have to tweak it for poor IE, but you get the idea.)
My solution
.css:
.js {
display: none;
}
.js:
$(document).ready(function() {
$(".js").css('display', 'inline');
$(".no-js").css('display', 'none');
});
.html:
<span class="js">Javascript is enabled</span>
<span class="no-js">Javascript is disabled</span>
Alex's article springs to mind here, however it's only applicable if you're using ASP.NET - it could be emulated in JavaScript however but again you'd have to use document.write();
You could set the visibility of a paragraph|div to 'hidden'.
Then in the 'onload' function, you could set the visibility to 'visible'.
Something like:
<body onload="javascript:document.getElementById(rec).style.visibility=visible">
<p style="visibility: visible" id="rec">This text to be hidden unless javascript available.</p>
There isn't a tag for that. You would need to use javascript to show the text.
Some people already suggested using JS to dynamically set CSS visible. You could also dynamically generate the text with document.getElementById(id).innerHTML = "My Content" or dynamically creating the nodes, but the CSS hack is probably the most straightforward to read.