I have written a function in javascript to create XML. I am getting an output through a popped-up window. I want to save this display as a document. How I can save it ? I'm using "alert(xml)" to display the output. i just want to save this display as a document. Please someone help me.
<head>
<script language="javascript" type="text/javascript">
function make_xml()
{main code
alert(xml);
}
//-->
</script>
</head>
<body>
<div class="title"> <h4>Create XML Report</h4></div>
<div class="box">
Schema name<input type="text" id="name"><br /><br />
Dimensions:<br />
<input type="checkbox" name="dimensions" id="categories">categories<br />
<button type="button" class="btb" onclick="make_xml()">XML erstellen</button>
</div>
</body>
</html>
Thank you.
Mirish
You can try creating a data uri and asking the browser to open it in a new window. Using a type of application/octet-stream should force the download but if you are ok with it opening in a new window, go ahead and use text/xml or application/xml. You can read up on data uris if you aren't familiar but try the following:
var xml = '<whatever>you did to get the xml</whatever>';
var uriContent = 'data:application/octet-stream,' + encodeURIComponent(xml);
var newWindow = window.open(uriContent, 'downloadXmlWindow');
There are limitations with the sizes in some browsers and there may be reason to base64 encode (again read up on data uris), but hopefully this gets you headed in the right direction.
Related
I have some Google Sheets app script code that hits an API and updates a field in a sidebar based on some user input. Everything works as expected with the exception of the button used to trigger the API call from the sidebar. For some reason, clicking the button opens a new, blank tab in the browser.
My best guess is that I'm somehow implementing the google.script.run.withSuccessHandler() incorrectly but I've been unable to confirm this. Any help would be much appreciated.
Sidebar.html
This is the full sidebar file that I'm using.
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">
</head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(function() {
$('#narrative-from-selection').click(getNarrative);
});
function getNarrative(narrative) {
//document.getElementById('narrative-response').innerHTML = narrative.replace(new RegExp('\r?\n','g'), '<br />');
var projectName = $('#project-name').val();
var templateName = $('#template-name').val();
google.script.run
.withSuccessHandler(
function(narrative) {
$('#narrative-response').html(narrative);
})
.withUserObject(this)
.generateContentForSelected(projectName, templateName);
}
</script>
<body>
<div>
<br />
<br />
<form>
Project Name: <input type="text" name="project-name" id="project-name" onchange="google.script.run.updateProjectAndTemplateNames(this.parentNode)"><br />
Template Name: <input type="text" name="template-name" id="template-name" onchange="google.script.run.updateProjectAndTemplateNames(this.parentNode)"><br />
<button id="narrative-from-selection">Generate from Selection</button><br /><br />
Response:<br /><br />
<div id="narrative-response"></div>
</form>
</div>
</body>
</html>
Code.gs
Here is the overview of the relevant function that I'm using (the info used to hit the API is removed but I've tested that piece many times and it returns exactly what I expect it to send back).
function generateContentForSelected(projectName, templateName) {
// go do some API magic here
var narrative = "This is a test string.";
return narrative;
}
Through a ton of trial and error, I figured out what was causing the issue, though I'm still unsure why it's causing the new tab to open. Apparently, something about the way app script makes an asynchronous call using a form is a little quirky. I stripped the <form> and </form> tags out of the Sidebar.html file and everything works as expected.
If there's a better method to correct this, or if I've gone about this all wrong from the start, I'd be interested to know how to structure this more effectively. But, I did get it working at least.
I'm using this javascript code to get the path of a file, but every time when I run the code, the path appears as "C:\fakepath\file". I think that it is a browser issue (I'm using Chrome), but before changing the browser settings, I wonder if there is any way to do the same procedure without having this error. Is there any javascript library to perform this procedure correctly? How can we fix this error code?
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function showFileName() {
var fil = document.getElementById("myFile");
alert(fil.value);
}
</script>
</head>
<body>
<form id="frmMain" name="frmMain">
<input type="file" id="myFile" name="myFile"/>
Show Name
</form>
</body>
</html>
As always, thank you very much for the help. :)
problem is, that the website is loading like for about 20 second or longer (user-problems preprogrammed)
my solution was to load a pre-site where the user sees a loading screen.
i did this with this html-site but i want to do the same in php.
the test-page is http://kater.selfhost.me/test/
Source Code:
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title></title>
<script type="text/javascript">
window.onload = function() {
document.getElementById("siteLoader").style.display = "none";
document.getElementById("container").style.display = "block";
}
</script>
</head>
<body>
<div id="container" style="display:none">
<div id="body">
<iframe src="http://kater.selfhost.me/stats/skins.php" frameborder="0" height="2000px" width="1024px"></iframe>
</div>
</div>
<div id='siteLoader'>
<div id='siteDetailLoader'>
<img src='ajax_loader.gif' border='0'>
Please wait while the page loads...<br /> <br />
</div>
</div>
</body>
</html>
i tried some workarounds, but after searching & testing for about three hours i give up...
thanks in advance for any help provided! :-D
Adding what I alredy said at your question commentary, I made a code loading this content via AJAX:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$( document ).ready(function() {
//Load content
loadAjaxContent();
});
function loadAjaxContent()
{
//VERY IMPORTANT: the URL domain MUST HAVE be the same as your request
//that's why I'm not writting the full http://kater.selfhost.me/stats/skins.php
$.ajax({
url: "/stats/skins.php"
}).done(function(data) {
//remove loader
$("#siteLoader").hide();
//put PHP content
$("#ajaxContent").html(data);
});
}
</script>
</head>
<body>
<div id="body">
<div id="ajaxContent" style="width:1024px;"></div>
<div id='siteLoader'>
<div id='siteDetailLoader'>
<img src='ajax_loader.gif' border='0' />
Please wait while the page loads...<br /> <br />
</div>
</div>
This is the most used way to load asynchronous content in the web. But pay attention at this: The http://kater.selfhost.me/stats/skins.php page is made to open as single page in the web, so it has <html> , <head>, <body> , etc.. tags, so..after loading this page into another you'll have two <html>, <body> .. tags in a same page, this is bad, but modern browsers have an awesome common sense and don't bother by this, but you should know that, and be aware.
The actual problem why it isn't loading yet, is this javascript in your content:
<script type="text/javascript"><!--
EXref="";top.document.referrer?EXref=top.document.referrer:EXref=document.referrer;//-->
</script>
I removed that and now works fine. Remember that's a quick fix, I don't know what this JS does.
Why it works in <iframe> and doesn't via AJAX? When you open in <iframe> is like opening in a new browser window..and via AJAX, as I have said, it'll load the page content straight inside your "parent" page.
So, removing this Javascript will work, but awesome further solutions:
If you need to open this page both as content to load (via AJAX), both as single page, you can make two pages.. one for each need.
If you just want to use as content to load, remove <html>, <head>, etc.. tags, and fix Javascript to work inside another page.
How to send a PDF file directly to the printer using JavaScript?
I found two answers in a forum:
<embed src="vehinvc.pdf" id = "Pdf1" name="Pdf1" hidden>
<a onClick="document.getElementById('Pdf1').printWithDialog()" style="cursor:hand;">Print file</a>
and
<OBJECT id = "Pdf2" name="Pdf2" CLASSID="clsid:CA8A9780-280D-11CF-A24D-444553540000" WIDTH="364" HEIGHT="290">
<PARAM NAME='SRC' VALUE="file.pdf">
</OBJECT>
<a onClick="document.Pdf2.printWithDialog()">Print file</a>
But my problem is that it just works on IE, and doesnt work in Firefox or Chrome.
Is there any solution for this?
I think this Library of JavaScript might Help you:
It's called Print.js
First Include
<script src="print.js"></script>
<link rel="stylesheet" type="text/css" href="print.css">
It's basic usage is to call printJS() and just pass in a PDF document url: printJS('docs/PrintJS.pdf')
What I did was something like this, this will also show "Loading...." if PDF document is too large.
<button type="button" onclick="printJS({printable:'docs/xx_large_printjs.pdf', type:'pdf', showModal:true})">
Print PDF with Message
</button>
However keep in mind that:
Firefox currently doesn't allow printing PDF documents using iframes. There is an open bug in Mozilla's website about this. When using Firefox, Print.js will open the PDF file into a new tab.
There are two steps you need to take.
First, you need to put the PDF in an iframe.
<iframe id="pdf" name="pdf" src="document.pdf"></iframe>
To print the iframe you can look at the answers here:
Javascript Print iframe contents only
If you want to print the iframe automatically after the PDF has loaded, you can add an onload handler to the <iframe>:
<iframe onload="isLoaded()" id="pdf" name="pdf" src="document.pdf"></iframe>
the loader can look like this:
function isLoaded()
{
var pdfFrame = window.frames["pdf"];
pdfFrame.focus();
pdfFrame.print();
}
This will display the browser's print dialog, and then print just the PDF document itself. (I personally use the onload handler to enable a "print" button so the user can decide to print the document, or not).
I'm using this code pretty much verbatim in Safari and Chrome, but am yet to try it on IE or Firefox.
This is actually a lot easier using a dataURI, because you can just call print on the returned window object.
// file is a File object, this will also take a blob
const dataUrl = window.URL.createObjectURL(file);
// Open the window
const pdfWindow = window.open(dataUrl);
// Call print on it
pdfWindow.print();
This opens the pdf in a new tab and then pops the print dialog up.
Try this: Have a button/link which opens a webpage (in a new window) with just the pdf file embedded in it, and print the webpage.
In head of the main page:
<script type="text/javascript">
function printpdf()
{
myWindow=window.open("pdfwebpage.html");
myWindow.close; //optional, to close the new window as soon as it opens
//this ensures user doesn't have to close the pop-up manually
}
</script>
And in body of the main page:
Click to Print the PDF
Inside pdfwebpage.html:
<html>
<head>
</head>
<body onload="window.print()">
<embed src="pdfhere.pdf"/>
</body>
</html>
a function to house the print trigger...
function printTrigger(elementId) {
var getMyFrame = document.getElementById(elementId);
getMyFrame.focus();
getMyFrame.contentWindow.print();
}
an button to give the user access...
(an onClick on an a or button or input or whatever you wish)
<input type="button" value="Print" onclick="printTrigger('iFramePdf');" />
an iframe pointing to your PDF...
<iframe id="iFramePdf" src="myPdfUrl.pdf" style="dispaly:none;"></iframe>
More : http://www.fpdf.org/en/script/script36.php
<?php
$browser_ver = get_browser(null,true);
//echo $browser_ver['browser'];
if($browser_ver['browser'] == 'IE') {
?>
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>pdf print test</title>
<style>
html { height:100%; }
</style>
<script>
function printIt(id) {
var pdf = document.getElementById("samplePDF");
pdf.click();
pdf.setActive();
pdf.focus();
pdf.print();
}
</script>
</head>
<body style="margin:0; height:100%;">
<embed id="samplePDF" type="application/pdf" src="/pdfs/2010/dash_fdm350.pdf" width="100%" height="100%" />
<button onClick="printIt('samplePDF')">Print</button>
</body>
</html>
<?php
} else {
?>
<HTML>
<script Language="javascript">
function printfile(id) {
window.frames[id].focus();
window.frames[id].print();
}
</script>
<BODY marginheight="0" marginwidth="0">
<iframe src="/pdfs/2010/dash_fdm350.pdf" id="objAdobePrint" name="objAdobePrint" height="95%" width="100%" frameborder=0></iframe><br>
<input type="button" value="Print" onclick="javascript:printfile('objAdobePrint');">
</BODY>
</HTML>
<?php
}
?>
I'm trying to write a web application using the new offline capabilities of HTML5. In this application, I'd like to be able to edit some HTML—a full document, not a fragment—in a <textarea>, press a button and then populate a new browser window (or <iframe>, haven't decided yet) with the HTML found in the <textarea>. The new content is not persisted anywhere except the local client, so setting the source on the window.open call or the src attribute on an <iframe> is not going to work.
I found the following question on StackOverflow: "Putting HTML from the current page into a new window", which got me part of the way there. It seems this technique works well with fragments, but I was unsuccessful in getting an entirely new HTML document loaded. The strange thing is when I view the DOM in Firebug, I see the new HTML—it just doesn't render.
Is it possible to render a generated HTML document in a new window or <iframe>?
EDIT: Here's a "working" example of how I'm attempting to accomplish this:
<!doctype html>
<html>
<head>
<title>Test new DOM</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
function runonload() {
return $("#newcode")[0].value;
}
$(function() {
$("#runit").click(function() {
w=window.open("");
$(w.document).ready(function() {
$(w.document).html(w.opener.runonload());
});
});
});
</script>
</head>
<body>
<textarea id="newcode">
<!doctype html>
<html>
<head>
<title>New Page Test</title>
</head>
<body>
<h1>Testing 1 2 3</h1>
</body>
</html>
</textarea>
<br/>
<button id="runit">Run it!</button>
</body>
</html>
I think you are overcomplicating this...
try this:
<SCRIPT LANGUAGE="JavaScript">
function displayHTML(form) {
var inf = form.htmlArea.value;
win = window.open(", ", 'popup', 'toolbar = no, status = no'); win.document.write("" + inf + ""); } // </script>
<form>
<textarea name="htmlArea" cols=60 rows=12> </textarea> <br> <input type="button" value=" Preview HTML (New Window)" onclick="displayHTML(this.form)"> </form>
$(w.document).html(w.opener.runonload());
You can't set innerHTML—or, consequently, jQuery's html()—on a Document object itself.
Even if you could, you wouldn't be able to do it using html(), because that parses the given markup in the context of an element (usually <div>) from the current document. The doctype declaration won't fit/work, putting <html>/<body>/etc inside a <div> is invalid, and trying to insert the elements it creates from the current ownerDocument into a different document should give a WRONG_DOCUMENT_ERR DOMException. (Some browsers let you get away with that bit though.)
This is a case where the old-school way is still the best:
w= window.open('', '_blank');
w.document.write($('#newcode').val());
w.document.close();
Whilst you can inject innerHTML into a pop-up's document.documentElement, if you do it that way you don't get the chance to set a <!DOCTYPE>, which means the page is stuck in nasty old Quirks Mode.