I have been trying to print some svg file from my application from browser. But after printing the output the content is displaying at the left top portion of the paper occupying quarter of the page. Can anyone suggest me a way to make the content fit in the paper. Its very urgent. Solution at the earliest point will be appreciated.
Thanks in advance.
Printing from a browser tends to be pretty bad for regular Web pages too, but you could take a similar approach to some websites: Include some "View for Printing" button that opens a new page which shows your document in a print-friendly layout. You could have this button open your SVG directly (not embedded within a page) with a canvas sized to A4 or Letter dimensions/aspect ratio (or slightly smaller to account for typical margin settings).
Related
On the main page it's showing blurry image in futured posts.
website link:- iguidu.blogspot.com
I tried different methods but it is not working. can anyone?
related script:-
Original image is only 72px and you're rendering into a large box, You're basically using thumbnails in the place of featured image, this is the reason it's blurry. try using larger images, ideally to the expected rending size, in your case 490 x 305px
In your case, this seens to occur because of the images size. If you open each image in a new tab you will see that teir original size are 72x72 although the display size (the size that us, clients, are seeing) is 490x305.
How to correct this ? The ideal is to get a bigger image, and also an optimized one. The most optimezed format for web is .webp. Check on THIS link what is this.
Another important thing when comes to resize image is to keep the aspect ratio, but I don't think you are experiencing any issue with that, although I will let a LINK talking about it.
We use jsPDF + html2canvas Javascript libraries to export HTML to PDF without the need for Native Browser support. Some of our big corporate customers use browsers which do not have Print to PDF functionality.
The current solution works pretty well, it creates a container DIV element with "overflow:hidden" and positions the HTML that is being exported such that only 1 page is visible, since we know exactly how many pixels wide/tall the page should be, then we use the library to export the view at that moment, then reposition things for the next page by scrolling down (actually we use a negative top margin, since html2canvas doesn't respect the "scrollTop" property).
The problem, though, is that this solution does not handle well at the borders of the pages. Images and text will get cut in the middle, and then continues on the next page. The end result looks weird, but at least there is nothing missing.
Is there a way to prepare this HTML in such a way that it will behave nicely at the borders? I am given an HTML element that when placed into an element of pageWidth pixels wide needs to be cut into pieces of exactly pageHeight pixels tall. I can modify the HTML any way that I want, b
I feel like there should be some solution, since I've noticed using the native PDF Print on Chrome solves this somehow because the output looks fine there - it somehow moves images around so it doesn't get cut off.
Here is a sample JS that I created that demonstrates how my code will create multiple pages.
http://jsfiddle.net/56u9Lxgt/
Basically, you have to check the actual page size always before adding new content.
In this link the answer:
jsPDF multi page PDF with HTML renderer
I am developing an online restaurant menu editor. The template is SVG, with a jpeg image of the menu as the background. The user is able to edit the text which is SVG text elements laid on top of the template image.
I am able to create a PDF from this SVG, for the user to see, just fine. Now I want to drop the low resolution background image out of the SVG and place the remaining text into a high resolution print, ready pdf for printing. The problem is the text does not appear in the right place in the print ready file. Nor is it the same size.
I am using the ColdFusion CFPdftag to place the text using the watermark feature. I have tested this and it works fine. It's just the size and coordinates that are off. I know this is because of the resolution but how do I get it to work? There might even be a better way, I don't know.
I figured out that I needed to change the viewport in the svg to the actual size of the hi res pdf instead of leaving it at the low res pixel size I had it at for the web.
I have a webpage which is visible nicely at a given width. I want it to remain at that width only. It can zoom in and out but I want the content to remain fixed with respect to that width.
The content of the webpage can be responsive also. Thats why I want it to remain fixed. Because I dont want the layout of the webpage to change with changing viewports of desktop or mobiles.
Red frame is viewport and green frame is webpage. Now image 1 shows a webpage with the given width. Images 2 shows webpage which has been scaled down to fit in the viewport but still has its content intact. Or it can be image 3 where the viewport is small and shows the same webpage with scrollbars.
I actually need this concept so that I can leave some markings(some points with fixed coordinates) on the page. And the markings remain fixed at their position despite of changing viewports.
I tried doing
<meta name="viewport" content="width=1286"> //1286 is the given fixed width here.
It solved the problem a bit but not totally.
Is this thing possible?
EDIT:
I think I was not clear enough. Let me explain it a bit further.
Actually the content inside is not in my control. I am trying to make a bookmark application. A static copy of the webpage of a specified URL will be saved with some modifications. Modifications will be addition of some markings as I explained before.
So the content inside can be anything.
Refer to this framework which is most widely used for Resposive Design CLICK HERE
There is a link at the bottom. Pretty much what happens, is when the page gets opened, it loads entirely on the right side of the screen. Then when it finishes loading every single element, it moves to the center which is it's actual position.
I believe the problem is caused by javascript, since the site works perfectly fine without it. It doesn't seem to matter what javascript is included, if I leave just 1 of them, the whole thing comes back.
Could really use the help. Also the site right now is about 500 pages big, so I'm really hoping for a solution which can fix this with just a few steps.
Thanks.
Here is the link to the page so you can get css/code: http://bit.ly/3EyoWu
Its definitely javascript. I think the banners on your site are loaded at the very end, which leaves the browser making incorrect guesses about the dimensions of the content until the page is loaded.
Try enclosing your javascript code inside fixed width (and height) divs or tables. You can easily determine the width (and height) required by javascript generated code by inspecting your page after its loaded. If its the banners, they are almost always predefined size.
Edit 1 ----
I got it. The specified cell widths for your table are narrower, the browser therefore is unable to calculate the page layout until the page is rendered completely. A column with width 110px has a banner having width = 120px.
Edit 2 ----
Try specifying widths for all-but-one column. That is, if you have three columns in the suspect table, specify the width for two, and let the browser decide the width for the third. Furthermore, the banners seem to occupy a width of 125px instead of 120px, probably because of unnecessary white space around them. I suggest that you revise the column widths appropriately (and parent table's width if necessary).
This might almost qualify as a 'flash of unstyled content' (FOUC) except that the browser doesn't first render a page in an unstyled format.
Instead, you see styled content before the Javascript is able to add the finishing touches.
You might get some further hints by searching for 'flash of unstyled content'.