I need to display some HTML content as it will be printed. Basically, I want to emulate the browser print preview feature.
I'm not sure how to do this just with HTML/CSS/JavaScript. The only solution I came up is to convert the HTML to PDF so it´s split into pages and then convert that PDF to images and print each image one bellow the other.
It will be really helpfull if someone can point a more straight forward method. I'm not even sure if this is posibble.
BTW, I'm using PHP in the backend, so if there is a PHP class for this it will be helpfull.
The page size for diplaying it will be letter no matter what the user have configured
This how it should look in the browser:
I don't think this is possible. You cannot know all the users' print-settings in the browser (javascript) and definitely not on the server (php, asp, java).
update
Think about it this way (please keep in mind that a decent 100% solid print preview is NOT possible):
User navigates to page and asks for a print preview
Website provides print preview (preferably in a html-format, otherwise png or pdf)
User likes and wants to print:
From the browser
From some image viewing/editing program (png)
From Acrobat (pdf)
Every print solution has it's own Print... dialog. You can change print settings here.
It's the last point where everything you want fails... You don't have control over the output anymore at that point (from your website)...
As others have point out, you can't do this. My recommendation is that you make a "printer-friendly" version that just contains a plain white background and plain black text. But that's about as close as you can get to the actual "print preview".
HTML wasn't really meant for page layout, it was meant to be read on screen. Why is the browsers page preview not good enough?
Anyways, what you could do is try and convert the html to latex or something similar, and render that to a pdf or png on the server side and display that. But that would preclude using very complicated html layouts otherwise it will get pretty nasty.
I think there's a simple workaround.
You can ask user the page size and top, bottom, left, right margins. Then render the page in PDF using these settings. PDF will guarantee that the page will be printed as generated.
I think this approach should work well.
Related
I'm assuming my request here isn't possible, but I'll ask anyway, just in case!
I am interested in trying to read the complete html of a sportsbook web site page displayed in a chrome browser, so that I can access the details and odds of each competitor in an event.
The thing is, most of the content is created dynamically. So if I right click and select "View page source" this only gives me the core html and none of the "detail". However, if I right click and select "Inspect" then I can access all the details I want, because this is the fully rendered version of the page.
So, using vb.net, is there any way that I can access the fully rendered page? This will obviously need to be done frequently and I need to interact with the page itself so I can't just use the basic inspect tool within chrome.
I do have a work around - taking screen shots and pixel scraping - but if I can inspect all of the page's elements, that will definitely be better especially as I will be able to read competitors whose display is off the bottom of the screen.
Any ideas? Thanks in advance!
An awful lot of modern web traffic (particularly on social media) consists of screenshots from web browsers. These typically include some formatted text, some layout, and some bitmap/vector graphics. E.g.,
It's really easy to take and share a screenshot, but it throws away lots of useful information and doesn't transfer well between devices (not to mention being far less amenable to things like screen readers for the blind and fancy data-mining). Of course the ironic part of this is that HTML/SVG is the perfect format for representing such data, and we're not using it even though it's right there.
html2canvas comes close to doing this, but doesn't properly handle images, see some semi-related discussion here.
My question is this, how can I select a visible area in my browser and save it in a format (ideally HTML) that preserves text and images and renders to something roughly similar when rendered separately? (so that it could be included as e.g. a data iframe for sharing).
I know that this is in general impossible, and that rendering HTML is a complicated task, but I feel like it should be possible to ask the browser something like "what elements are being rendered within these pixel coordinates?".
First:
Right click on page, then click on "Save page as".
Save it with a name that ends with .html (or .webarchive in some scenarios. See which works best for you).
Edit the now saved html file to only have the part you want (you can use any text editor. Sublime Text and Atom are usually suggested).
Then:
You can open it in your browser to see what you are up to.
You might want to inspect where the CSS is from too, and get that in your html's file folder, then link the html file to it, so as to preserve the styles.
As far as I understand, you'd want to bring all the CSS to be inline, or, at least, in the <head> section of the html file, so you can upload it as a single file, and don't need to keep linking it to the CSS file.
In my web application, a user may make a post with images, embed videos and text with different styles. I want to generate a preview for the post to show it on the front page of the web application. It demands that it doesn't take too much space and as clear as possible.
I know that I need to parse the post html first and may extract image elements first. My consideration for the text is simply to extract all plain texts and show part of them.
Could someone provide other advice, methods or resource about this problem?
As I understand, you want to render a HTML page into an image? You should use some layout engine, such as WebKit or Gecko on server side.
Another option is to use some third-party online tool for these previews. But rendering the page is pretty hard process, because of it's time complexity and memory space requirements for storing images. I have found these services:
http://www.thumboo.com/
http://www.thumbalizr.com/
http://www.zubrag.com/scripts/website-thumbnail-generator.php
am new to the iphone development and I have a problem to display a certain site that is essential for my app.
What I want to do is to display this site with no horizontal scrolling and with a text size that can be read without zooming in or out.
As far as I understand this is impossible without mess with the html source code.
But I have no idea how to fetch it, and most importantly how to modify it and with which tools I can do that.
And then how I can load that code in my web view.
I know that I ask to much but I want to learn how to do this stuff and I don't search for someone to give me a ready solution but to point me in the right direction.
If I understand your question correctly, you want to render a site which is not under your control and add certain style changes (font size, no-scroll, etc) to it.
If what you need from the page doesn't change (i.e. it's a static page), then this should be fairly easy. You simply copy the code from the source by saving the page as an HTML file from your web browser. From there, you can use your favorite HTML/CSS editor to make the changes that you need and then host it yourself.
If you don't want to host the code yourself and/or the page is dynamic then you're going to need to give us more information to adequately answer this question.
In my rails app I have a need to save some webpages and display them to the user as images. For example, how would I save www.google.com as an image?
There is a command line utility called CutyCapt that is using the WebKit-Rendering engine to render HTML-Pages into various image formats. Maybe this is for you?
http://cutycapt.sourceforge.net/
Prohibitively difficult to do in pure Ruby, so you'd want to use an external service for this. Browsershots does it, for example, and it looks like they have an api, although I haven't used it myself. Maybe someone else can chime in with alternative but similar services.
You'll also want to read up on delayed_job or something similar, to make sure you're accessing those page images as a background task and that it doesn't interfere with your actual application.
You can't do it easily (probably can't do it at all).
Each page is just a text - html data. The view you want to make an image of is a rendered page. Browser renders the page using tonns of techniques like html parsing, javascript parsing, css parsing, font rendering, etc.. To make the screenshot of google page - you would need to do all the rendering somewhere in memory and then take a screenshot of rendered page.
That task is almost impossible (there is nothing fully impossible).
If you are really eager to donate tonns of time to accomplish that task - you should do this steps:
1) Find some opensource rendering engine. Firefox would do.
2) Find some way to communicate between ruby-on-rails and that engine.
3) Wire it all together and see the results.
However, I see steps 1 and 2 as nearly impossible.
Firefox addon:
https://addons.mozilla.org/en-US/firefox/addon/1146/