I have a problem with my html layout. I am using CSS -ms-grid in order to create a map of points in a specific place on my site. On IE my layout looks exaclty as I wanted, but after conversion to PDF the -ms-grid falls apart. Its width fills the entire page. I am using PDF Creator to convert my html.
How can I get my layout to look exactly the same in the PDF file as it does in the browser? Maybe you know a better or faster way of conversion?
I am not a good programist, but I am trying :)
The problem is probably that the PDF Creator doesn't support the -ms-grid CSS property. As you can see in Can I Use, the support is very limited. If you open your website in another browser, like Chrome or Firefox, the grid will probably look like in your PDF. You have to find another way to do your layout to have it compatible with PDF Creator.
Related
can any one tell me how to convert html markup to an image and save it. i tried researching on google but i did not find anything. it would be great if you could provide me any resource or article to achieve the functionality. OR is it possible to take a screen shot of the rendered html on the browser and save it as an image? please let me know
You could achieve that using an JavaScript library called html2canvas. This library will allow you to take screenshots of a webpage.
The screenshots are usually saved as a canvas element, which you can easily convert to an image later on.
Refer here to learn more about the library and the use cases.
I am trying to create a html page, that can be read on screen as well as printed on paper. The layout of the page is a bit advanced and uses e.g. flex.
I searched and tried several suggestions (page-break*, block sizing, ...) but could not get any useful breaking behavior working on Chrome 58.
Thus I am now asking here how to do a multi page html layout, where I can control which content will be shown on which page (preferably without having to restructure all content)? Target is current Chrome 58.
Bonus points if you post a fiddle that demonstates the structure.
EDIT:
I am using Emacs and impatient-mode to edit/show the html page.
The problem was actually Emacs httpd and impatient-mode. Using these breaks some parts of CSS Media queries. Turns out the HTML code worked all along on its own.
I am creating a graphic to be dynamically generated for a report for one of our clients. I have the rough layout and I am testing to see how it prints. However, when I go to print it/save to pdf (testing both), the stylized divs are not being displayed.
Html Generate Screen
Print/Pdf Page
CSS styling for printing is very limited. With more complex layout like yours, you're either better of converting it to an image or converting it to a PDF file. Choosing the best framework really depends on what back-end you're using. In Java I had most of luck using FlyingSaucer and in PHP html2pdf.
Also, this is good tutorial on what is possible using CSS styling for printing.
In my iPhone app, I have a "Help" screen. Currently, I use an almost fullscreen UIWebView and display an RTF with the help text inside. But as the app is growing in terms of functionality, so is the online manual. I just have to split it up and subdivide it into several "pages".
Now I wonder whether it is possible to do so without any (or only little) change to the application code, i.e. whether it is possible to mimick the behavior of a UINavigationController with HTML inside the existing UIWebView. The result should look roughly like the iPhone user manual (switch the UserAgent to "Safari iOS 4.3.3" to see it). The HTML source however should be stored in local files on the device.
Is this possible? If so, does it require more or less effort than programming the same thing directly in Objective-C?
Ideally, I would like to have kind of a skeleton, where I only have to fill in my help text.
Have you looked into jQuery Mobile? It can give you a navigation controller kind of look with HTML 5. It meant for safari applications, but I think that it should also work within a UIWebView also.
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.