I am planning to develop a webapp. The page will have an iframe on the left side and javascript form on right side. The iframe will be used to view pdfs from server.
I have been looking for ways to capture or get the current page number of the pdf being viewed in the iframe.
Is this possible?
One suggestion would be to try and use PDF.js, a PDF viewer that is built with HTML5. This might help you get around the need to use an iFrame to render the PDFs. But, if you need the iFrame for other reasons, then try looking at the PDF.js examples. As indicated on a previous stackoverflow thread, there are functions you could take advantage of:
PDFJS.getDocument('helloworld.pdf').then(function(pdf) {
// you can now use *pdf* here
pdf.getPage(1).then(function(page) {
// you can now use *page* here
});
});
Hope this helps the cause.
Related
I am trying to write HTML code that hits a URL and fetches me it's page source i.e. the whole content which we see when we right click on the page and select the 'View Page Source' option.
I then want to process this content to extract some relevant values.
I have tried a few options on a W3schools TryIt Editor but nothing worked. I have tried for other URLs also, but no luck.
Can someone please tell if this is possible using HTML and JavaScript and if yes, how?
You can make an HTTP request using the Fetch API pretty simply:
const res = await fetch('https://example.com');
const html = await res.text();
However, this is only going to work for URLs that allow you to fetch their sources cross-origin. For security reasons, this isn't common. (If it were, most any other website could steal content from other sites you're logged into, such as your webmail or your bank!)
The only way around this is to proxy that data server-side where the cross-origin problem doesn't exist.
What it is the main purposes to fetch a different page into your page?
On another hand, did you try to use iframes?
https://www.w3schools.com/tags/tag_iframe.asp
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe
Note: In the end, you could fetch the page but you won't have control over js.
I have a web page that allows a user to choose some options for a widget and then dynamically generates example HTML based on those options. The HTML is put in a div on the page so that the user can see how it looks and copy/paste it to their own site, if they so desire.
I would like to add a "view this example page" link, which opens in a new window and has the example HTML from the div, so that the example can instantly be seen in action.
Is there a way to do this with javascript/jquery?
You can actually use the window.open method, saving a reference to the opened window, and then writing to it.
https://developer.mozilla.org/en-US/docs/Web/API/Window/open
var exampleWin = window.open("", "example");
var docMarkup = "<!doctype html><html><head><title>test</title></head>" +
"<body><p>Hello, world.</p></body></html>";
exampleWin.document.write(docMarkup);
// later you can also do exampleWin.close() if you wish
Try pasting the above code in your browser's developer tools console.
The usual way to accomplish the end goal works a bit differently. You have a web server listening for GET requests at /code (or similar) and it constructs and responds with the appropriate HTML based on the query string. So you can request /code?color=blue, for example.
Constructing documents is what web servers are designed to do. This approach allows you to leverage caching policies, integrate with a wider variety of user authentication and authorization systems, etc.
To display the source code to the user, simply fetch() the appropriate URL and put the contents in a <code> tag. To display the rendered widget, use an <iframe> whose src is the same URL.
If you really want it to be a new window, open() the URL instead of using an iframe. But beware of popup blockers.
I have tried looking for a solution to this problem on the site, but can't appear to find one. I have limited knowledge about this particular subject, so please excuse my ignorance!
Our website converts HTML to PDF using the Winnovative HTML to PDF converter.
The pages that need to be converted are using KnockoutJS and therefore the HTML code is not in the page source when the page is originally loaded.
I have tried setting a 30 second page delay, but it seems like the converter won't even save our home page, e.g. www.zapkam.com, let alone the pages that I actually need to save, e.g. http://www.zapkam.com/print.htm#/Orders/ZK1019467/Order/
This had previously been working fine on version 11.6.0.0 on a Windows 2008 Server, but since transferring to version 12.5.0.0 on a Windows 2012 Server, it is no longer working.
The fact that it was working before seems to point towards it potentially being a permissions issue as the server is not configured, but I would be very grateful for any insight!!
It will done using Javascript with Canvas,
As I had written code in your Print.html Page..
After successful HTML Rendered we need to call my button "print PDF" find in demo application..
Look into my demo Index page , It will create PDF and write to the client browser..
please check attached application..
www.maplayout.com/zampak.zip
Thanks,
Abhishek
How to secure the src path of the image when clicks on inspect element so that user should not get to know about the actual src path..please help me with the solution and it should be done with javascript only no other tags should be used.
You can convert image into base 64 data URIs for embedding images.
Use: http://websemantics.co.uk/online_tools/image_to_data_uri_convertor/
Code sample:
.sprite {
background-image:url(data:image/png;base64,iVBORw0KGgoAAAA... etc );
}
This is commonly done server-side, where you have an endpoint that serves the image file to you as bytes...
You can store the images in a private location on the server where IIS/<your favourite web server> doesn't have direct access to it, but only a web app, running on it, with the required privilege is authorized to do so.
Alternatively people also "store" the images in the database itself and load it directly from there.
In either case, the response which has to be sent back has to be a stream of bytes with the correct mime type.
Edit:
Here are a couple of links to get you started if you are into ASP.NET:
http://www.codeproject.com/Articles/34084/Generic-Image-Handler-Using-IHttpHandler
http://aspalliance.com/1322_Displaying_Images_in_ASPNET_Using_HttpHandlers.5 <- this sample actually does it from a database.
Don't let the choice of front-end framework (asp.net, php, django, etc) hinder you. Search for similar techniques in your framework of choice.
Edit:
Another way if you think html5 canvas is shown here: http://www.html5canvastutorials.com/tutorials/html5-canvas-images/
However you run into the same problem. Someone can view the image url if they can see the page source. You'll have to revert to the above approach eventually.
I am aware of the hidden iFrame trick as mentioned here (http://stackoverflow.com/questions/365777/starting-file-download-with-javascript) and in other answers.
I am interested in a similar problem:
How can I use Javascript to download the current page (IE: the current DOM, or some sub-set of it) as a file?
I have a web page which fetches results from a non-deterministic query (eg. a random sample) to display to the user. I can already, via a querystring parameter, make the page return a file instead of rendering the page. I can add a "Get file version" button (our standard approach) but the results will be different to those displayed because it is a different run of the query.
Is there any way via Javascript to download the current page as a file, or is copying to the clipboard my only option?
EDIT
An option suggested by Stefan Kendall and dj_segfault is to write the result server side for later retrieval. Good idea, but unfortunately writing files server side is out of the question in this instance.
How about shudder passing the innerHTML as a post parameter to another page?
You can try with the protocol data:text/attachment
Like in:
<html>
<head>
<style>
</style>
</head>
<body>
<div id="hello">
<span>world</span>
</div>
<script>
(function(){
document.location =
'data:text/attachment;,' + //here is the trick
document.getElementById('hello').innerHTML;
//document.documentElement.innerHTML; //To Download Entire Html Source
})();
</script>
</body>
</html>
Edit after shesek comment
To add to Mic's terrific answer above, some additional points:
If you have Unicode content (Or want to preserve indentation in the source), you need to convert the string to Base64 and tell the Data URI to treat the data as such:
(function(){
document.location =
'data:text/attachment;base64,' + // Notice the new "base64" bit!
utf8_to_b64(document.getElementById('hello').innerHTML);
//utf8_to_b64(document.documentElement.innerHTML); //To Download Entire Html Source
})();
function utf8_to_b64( str ) {
return window.btoa(unescape(encodeURIComponent( str )));
}
utf_to_b64() via MDN -- works in Chrome/FF.
You can drop this all into an anchor tag, allowing you to set the download attribute:
<a onclick="$(this).attr('href', 'data:text/plain;base64,' + utf8_to_b64($('html').clone().find('#generate').remove().end()[0].outerHTML));" download="index.html" id="generate">Generate static</a>
This will download the current page's HTML as index.html and removes the link used to generate the output. This assumes the utf8_to_b64() function from above is defined somewhere else.
Some useful links on Data URIs:
MDN article
MSDN article
Depending on the size and if support is needed for ancient browsers, but you can consider creating a dynamic file using data: URIs and link to it. I'be seen several places that do that. To get the brorwser to download rather than display it, play around with the content type you put in the URI and use the new html5 download attribute. (Sorry for any typos, I'm writing from my phone)
I don't think you're going to be able to do it exactly the way you want to. JavaScript can't create a file and download it for security reasons. Nor can it create it on the server for download.
What I would do if I were you is, on the server side, create an output file with the session ID in the name in a temp directory as you create the output for the web page, and have a button on the web page with a link to that file.
You'll probably want a separate process to remove files over a day old or something like that.
Can you not cache the query results, and store it by some key? That way you can reference the same report output forever, or until your file garbage collector comes along. This also implies that you can create static URLs to report outputs, which tends to be nice.