Hi,
EDIT: I want to achieve it by with out using any third party software..My application is a SAP product and I cannot go to every customer and install that software in his system.
I have the following scenario.. There is a button in my webiste(ofcourse,its a business applicaion) named "Save as image".so whenever user presses that button the content of the page has to be converted to image file and saved in his system.
Can we achieve it by either javascript or jquery?
If we cannot do it in javascript ,can we do it in SAP BSP,since my application is being developed in SAP BSP?
I had already searched in this site and found one solution which only works in Firefox extesnion. But I need a cross-browser solution which must work for IE,Chromer,ect.
The way to do this would be render the HTML page in hidden <canvas> element and then saving the canvas content as an image.
It is possible, but you won't have perfect rendering output or a solution working on legacy browsers.
Please see
https://stackoverflow.com/a/12660867/315168
for more information.
Alternatively submit a stateless page URL to the server-side where a headless browser renders the page and takes a screenshot using Selenium automation. If the page is public some web services exist for this too.
One easy but partial IE solution, it uses ActiveX so not crosswbrowser and a general one that is a bit more cumbersome
The IE solution
function printScreen(){
var oWordBasic;
if (window.ActiveXObject){
oWordBasic = new ActiveXObject("Word.Basic");
oWordBasic.SendKeys('%{1068}');
oWordBasic.SendKeys('%{PRTSC}'); //or if the above doesnt work..
//save or transfer the clipboard contensts
}
}
The general solution:
Use a screen capture utility like Gadwin PrintScreen http://www.gadwin.com/printscreen/, it's for windows but i'm sure there are the like for Linux and Mac. You can define a hotkey and let this save the image to a fixed location with autonumbering. The program doesn't need to be installed, it's portable so it can reside on a networkshare.
you may also try to create java applet or jar included into site that would capture some part of the screen or browser. i saw mechanism for real time screen sharing based on jar loaded files, but i didn't see the code.
here is some lib for java html into image conversion
http://code.google.com/p/java-html2image/
heres simmilar topic
How to capture selected screen of other application using java?
Related
I am developing a small labeling tool that given a URL should display a document hosted on that URL and allow a user to choose a label for that document.
I want to display the contents of the URL for this purpose. As far as I know, I can either get the URL content, parse the contents, and display or use an iframe option.
Without using parser
Iframes are not enabled for the target URL, the contents of which I want to display. Is there any other way to do this using javascript without using parser?
Using parser
I can crawl the contents of the URL, get everything between and dump it in the webpage area.
I'm new to javascript and front end development so I am not sure whether these are the only options.
Are there other options to do this?
If the parser is the only option, Can I dump the HTML that I get from the remote URL? I understand that images and other media that may be within on remote url won't be displayed. Is there any other caveat to this method? More importantly, Is this the best way to do this?
Most sites do it via the iframe like you mentioned like codepen.
Also, you can use Puppeteer ( a headless browser ) to do these sort of things. Get the contents using web scraping or take a screenshot or print a pdf. Pretty nifty library.
Most things that you can do manually in the browser can be done using
Puppeteer! Here are a few examples to get you started:
Generate screenshots and PDFs of pages. Crawl a SPA (Single-Page Application) and generate pre-rendered content (i.e. "SSR"
(Server-Side Rendering)).
Automate form submission, UI testing, keyboard input, etc. Create an up-to-date, automated testing environment.
Run your tests directly in the latest version of Chrome using the latest JavaScript and browser features.
Hope this helps !
Like the title says, I have a requirement to print a part of the browser window to PDF and then send it to the server so that it can be faxed. I have already found a faxing service so the real problem is in figuring out how to generate the pdf to begin with. I have come up with several options to do this, however all of them come with significant downsides. They are:
Use window.print() on a button click along with print media queries and have the user download the resulting PDF and re-upload it to be faxed. The problem with this is that it is a multi-step process and my users would prefer to just click a single button
Use a library like jspdf to generate the pdf, output to a byte array and upload it to the server. This will work, however it looks terrible because I lose all styling and my print media queries will not be applied. So far, this is my best option
Render the HTML server side and generate a PDF from that. This will work fine, however it requires duplicating all of the work I have done client side (this is a SPA app) along with duplicating the maintenance.
Use a rendering service or library to run the client side application in a headless browser and generate the PDF from that output. This would be very complicated from a security perspective as the application lives behind a login page.
I would appreciate any suggestions not listed above as well as any advice on how to eliminate the cons posed by these options. Thanks in advance!
Looks like using jspdf to render the PDF along with a library such as html2canvas to convert the printable region into an image to preserve styles will get the job done. It has taken some work to configure everything properly (and I'm not through yet) but I am confident this solution will be effective.
I'm creating a personal home page, due to the fact that iGoogle will be discontinued. One of the things I'm trying to create, is a speed dial-type interface, with website thumbnails as links, and I'd like to automate this process.
I've attempted screenshot automation a few years back with linux and the webkit engine. And it's fine. But my problem is, that I want the screenshots to be from my browser, i.e. my Gmail inbox, not the login page I'd get if attempting a remote screenshot.
I thought of using html2canvas but again, I'd have to load the source of the webpages remotely using a proxy, and that's not what I want. Another attempt of mine, was to load the website in an iframe, extract the source, and pass it on to html2canvas. Unfortunately most websites like google, facebook etc don't allow embeding their websites into iframes, so I'm still stuck.
How do plugins like FoxTab, and SpeedDial make the screenshots from within the browser without popups etc? They do it "browser side" silently, is it possible to duplicate this using just JavaScript? Or is there a way I could accomplish the same in another way, perhaps with a custom addon or something?..
Have you considered using a service like http://webthumbnail.org/ ?
http://phantomjs.org/ is also a great service for that if you want to do it yourself.
Take a look at phatomjs. We use it to take screenshots of all our hosted sites periodically. Phantomjs is a headless Webkit implementation.
For a project I am looking for a good way to display pdf files in a webbrowser (IE8 and newer). The browsers used in my project have acrobat reader installed, so thatwillbe the preferred way to visualize thepdf file.
Is there a way to access acrobat reader currently opened in a div to (for instance) switch pages or jump to a given bookmark? Is it also possible to listen for text selection events?
Thanks in advance!
I'm not sure you can control the PDF from the outside of the page. However, pdf.js is a PDF renderer written in Javascript. It allows you to embed a PDF viewer inside a page and fully control it, including flipping pages, and the like. It may just be what you're looking for!
Having worked on this problem for some time, I now use the following solution:
Use pdfObject.js to embed the pdf file in my webpage.
Communicate between pdf and html using the HostContainer. Important here is that you are able to put some javascript in the PDF file.
Important note is that this only works with the embedded Acrobat Reader/Pro version.
see: http://www.javabeat.net/articles/print.php?article_id=301)
Good luck. If you encounter problems, just leave a message, perhaps I can help.
This won't solve all of your feature requests, but you may want to take a look at the PDF open parameters. If you open a pdf with the appropriate hash-url, you can control reader's behavior.
For example, the following will open a PDF and go to the third page of the pdf:
http://example.org/doc.pdf#page=3
While the subject could sound like I'm looking to do something shifty, I'm not; I maintain an internal web site used by several hundred phone operators, and would like to add the following functionality:
I would like to add a control in the header of all of the web pages that would capture an image of the entire desktop and save the image as a file to a shared network drive to assist in troubleshooting production problems. This screen capture app would be called by JavaScript.
I've researched many threads on this site pertaining to capturing screenshots, and all of the offered applications don't meet my need in one of two ways:
The screen capture application has a GUI that pops up and the user sizes some sort of capture control or interacts with a window to do the capture. The users are not very computer literate, and could not be trusted with using a "pop-up" application correctly-- and it would be impossible to enforce them to save the image file with a common file naming convention. I would like the user to press a single UI control on a web site and have JavaScript make the calls to obtain a screen shot and save the image without any further user interaction.
Some automated applications save the HTML by re-posting to the site and "re-assembles" the individual HTML elements into an image. This will not work as the input data that the operator has typed in needs to be in the image, the site uses AJAX so the visual "state" of the web page will be different from one re-obtained from a POST, and some applications have had (active directory) security issues when trying to interact with our (secured) web sites.
If there isn't an application that will meet this need, I'll just roll my own control in C#. But I'd rather obtain a third-party control. so I don't have to support my own control for life. :-)
Javascript does not provide access to the local system for this functionality due to the security risk.
I believe the only way of doing this on a web page is possibly via an active X control or Java applet (similar to screencast-o-matic) but even then security may be an issue.
I also image unless your own c# control is in a windows forms application it would not work as c# controls that are part of a web site will be run on the server and not the client.
Hope this is of some help.
Well to do that you'll need something to interact with the desktop which can't be done by javascript alone.
You'll need to have an Active X Object to be able to interact with the client's machine. Once you have that, it is easy to just have the object take a picture and save it to the directory.
I believe I have the C# code to take a screen shot. If you want I'll post it.
Some alternatives to ActiveX / Java:
You can create a flash program to do the screen capture. I haven't done this and don't know the details, but I'm fairly sure it can be done.
You can setup a custom protocol for screen capture (eg. screencapture:// ), and in your header include a
Screen Capture
link. You'll need to find a gui-less screen capture program to do the actual capturing and set it up as the handler for that custom protocol.
Did it once. I couldn't find a direct way so did it rendering HTML to canvas, then canvas to image using html2canvas. Canvas to image is a much more common theme so you'll find many tutorials about.
HTML to Canvas
Canvas to image
NOTE: rendering from HTML to canvas may leave some elements behind, like SVG. But overall it did as much as expected.
PSR (problem step recorder) is a great tool for debugging purposes on client machines and it is available on all windows machines by default.
Try below and see if it works for you.
Go to Start->Run and type psr.exe (or just psr) this should open the recorder. This is fairly easy to use, so even users/clients can use it. If it works then try below steps to setup.
Step 1: Register PSR protocol. This tells the browser what to do when a link on the page is referring to PSR protocol (which we will use to open this recorder).
- Create registry values as below
HKEY_CLASSES_ROOT/
PSR/
(Default) "URL:PSR Protocol"
URL Protocol ""
shell/
open/
command/
(Default) psr.exe
If you are not comfortable with creating registry values, download and double click this file.
Use this link for more information.
Step 2: Now create an example html file to test launching PSR.
Save the below code to index.html file and open it.
<html>
<head>
<head>
</head>
<body>
Start Recording
</body>
</head>
</html>
Or download this file and open it.
This should open your PSR. It is easy to use and can record all the information you need for debugging.