I am creating a html page based on the data coming from Database and then converting it to pdf using dompdf. I know about page-break-after in dompdf and is able to use it shift the content to next page by using a if condition in php like this
if($count_row > 7)
{
$html = $html.'
</table>
<br/><br/>
<img width="1640px" height="30px" src="bottombar.png" />
<div style="page-break-after:always;position:relative;">
</div>';
}
Everything works fine.
But, now I want to break the page dynamically. Depending on the height of the table after content is entered in each row, if the next row will spill over to next page,then break the page add some headers and add next row.
Since the content coming in each row is dynamic, there is a chance that one page might contain 10 rows, another 15 rows. Hence I don't want to restrict the row limit as I am doing now.
Is there a way I can get height of the page after each row is added in dompdf or from php. I know it can be done in JS but is it possible to do in php.
Also I know the page size, since I am setting it manually.
$paper_size = array(0,0,1300,1300);
$pdf->set_paper($paper_size);
Any help is appreciated. Thanks in advance.
I was working with this library and it always was giving me this kind of issues. What I'd recommend to change for phantomJS.
PhantomJS is a headless WebKit scriptable with a JavaScript API. It
has fast and native support for various web standards: DOM handling,
CSS selector, JSON, Canvas, and SVG.
it will allow you to put rendered content and save it as PDF
http://phantomjs.org/screen-capture.html
Usage example: https://coderwall.com/p/5vmo1g/use-phantomjs-to-create-pdfs-from-html
Related
This is such a bizarre thing that even just typing in the title makes me question my own sanity. Anyway, I'm trying to figure out why my reports are taking so long to load and I've discovered that Chrome is loading an image of my page, after the page has finished loading. But don't take my word for it, check this screenshot from dev tools.
You can see that there are two instances of report.test.php being loaded. The first one is a document and the second one is an img. (You can tell by the icon and also by filtering the list on those two types).
So in this example the report is small and loads about 15 rows of data and renders them in an HTML table. This is done after 710 ms (in this example) and it all looks good except that the favicon in the browser tab keeps spinning for another 808 ms while that img loads. Not a huge deal on a small report like this one but if you load a lot more data that takes, for example, 6 seconds to load, then this second image also takes an additional 6 seconds to load for a total of 12 and that's a big deal.
Now as I said, when the document is finished loading I can see that the HTML has finished rendering so I can essentially use the report and ignore the spinning favicon, but this causes problems if I try to load another report, in another tab, while that favicon is still spinning. It gets jammed up and basically brings everything to a grinding halt and it's all bad. Bottom line, I need to stop this from happening.
So what is this img version of my report? Why is it there and can I prevent it?
Turns out chrome was generating its own image because I told it to use a blank background image in my body style.
Background
I had added background:url('') to the body tag of the reports page.
<body style="background:url('')">
I did this because the stylesheet I was using at the time added a background image, which I wanted for every other page in my app but not the reports page, so this was my way of overriding the style sheet.
Solution
Anyway, apparently when you submit a blank string as a background image chrome then generates its own image and it does so by making an image of the entire page, and the more HTML on the page the longer it takes to generate this image.
The solution is to not pass in a blank string to background:url.
I know that the question I have is quite complex, and I really hope someone can help me. I have created an image gallery qih jquery and php. Firstly I am grabbing all the image names from a MySql database, then taking them from the server folder and resizing them with php. It creates the thumbnails, then I created a pop up window with jquery which shows the image in large. After that I place a previous and next button and told jquery to grab the array of image results from php and echo them into the jquery using json. Then it goes through the array to create the next and previous effect. I then centered each individual image when the next and previous button were clicked. When you load the first and second picture it is not centered and it goes to the right. I CAN NOT figure out why this is happening. I really need some help here. There is too much code to post here so I am giving you the website and you can see pretty much everything in the source code. Remember that I am using php so if you are wondering how it is iterating through the pictures that why. Thanks if anyone can help me at all.
http://www.oceanphotostudio.com/test/collection/before-and-after.php
The reason it's getting offset is that the margins that center the popup div are being calculated before the image is loaded. Notice that on the first click, it will have margins of -37px and -30px. After one image is loaded, calling another one will use the width and height of the last image that was loaded in, which is why you can get unpredictable results.
Take a look at JQuery's load event handler for information on how to create a callback to resize after the image has been set to load, rather than before.
Your description totally overcomplicates the issue. Browser could care less how you generate the array or html on server, or what language it is
Your position problem is a simple css issue. You've set the top and left of your popup to 50%. This means top left corner of popup will start at dead center of page, and go right and down from there.
Use a browser console to inspect the html elements and the css rules that apply to them and adjust accordingly. WIthin the console you can make live edits to see impact of the adjustments in real time
This question is a bit open at the moment as I'm not sure the idea is even possible.
So far I've loaded an image from a url, and then used jQuery UI draggable feature to allow the user to drag html text (which has been replaced using cufon font replacement) over the top of the image.
The major step (which is what my question relates to) is being able to take the image and text layered over the top of the image, and save the result, either to the server, or potentially offer the option to save the altered image to the user's HD, or what would also be useful is to upload to facebook using the facebook API, but this is something I know is possible.
It all hangs on whether it's even possible to achieve the first step, which is to save the image and layered text as a combined image?
I wonder if there is a PHP/jQuery solution that would allow me to do this?
My suggestion would be to have an internal URL that outputs the final image using jQuery and PHP, then take a screenshot using webkit2png of that page. You should know the dimensions etc., so you'll be able to crop down the resulting screenshot to just the region you're looking for.
Is there any way I can direct display PDF files in modal boxes?
I am using CodeIgniter PHP framework and jQuery as JavaScript framework.
UPDATE: I read on net that this is possible by loading it in iframe, and Adobe PDF will render it, but many seems to oppose, so is there any way I can convert those PDFs to images?
Short answer: No.
Longer answer: Usually, PDF documents are not rendered by the browser directly, but rather by some specialized PDF reader. As soon as the browser sees a content type of application/pdf, it passes the response along to the reader. Nothing you would do in your HTTP headers, HTML or JavaScript would make it across the gap between the browser and that other program, and the PDF format itself contains no switch to enable any kind of modal user interface.
Update: Rendering the PDF as an image would allow you to display the graphical content of the document in a more modal fashion. You still are not able to block the user from closing the browser, but you would be able to "lock down" anything else on your page while the image is displayed.
Related: How do I convert a PDF document to a preview image in PHP?
If you really want to, you can just embed it as a normal object. For example:
<object type="application/pdf" data="embeddedfile.pdf" width="500" height="650">
That's a bad idea. Always let the user set their browser to how they want to handle PDF files. So just create a link to the pdf. Modal windows aren't for that purpose anyway.
I am working with php. I have images kept in order. When i do query the images comes in order but when they load they does not load in order. The small images load first and then big images. For example I have 5 images. These images should be loaded in order(1,2,3,4,5). But here its not happening. Image 4 loads first, then 2, 1 and so on. So what can i do for this problem? Hope to get solution.
Thanks in advance.
If you are speaking about the order images are displayed by a web browser, you do not have much control over that, as long as you have several <img> tag on your page :
the browser will request the images from the server in the order it wants (most probably, the first <img> tag encountered will be the first image requested)
each image takes some time to download ; and each image is displayed when it's downloaded ; considering small images should be downloaded faster, small images should be displayed first... depending on the order they were requested -- see previous point.
In the end, if you want absolute control on the order the images are displayed, your initial HTML should probably not contain all the <img> tags: a solution would be to add those, in the right order, when the previous image is downloaded.
This can probably be done with some JavaScript code, to detect when an image is loaded (event "load") ; and when an image is loaded, just add a new <img> tag to the page, for the next one; and so on.
But I wouldn't go with such an idea: it won't work if JS is disabled, your images will not be seen by search engines.
You can control everything on your web server, but nothing on network or browser sides.
A possible solution is to build a single image containing your five images and display each relevant portion to its dedicated position.
Have you tried preloading them with a JavaScript library?
Not sure how you would implement this in PHP, but in the past I have usually had the a 'order' field for each image, then the images were added dynamically according to the 'order' field.
As you should have guessed, image is loaded according to their sizes. Ofcourse, the smaller ones will load before the bigger ones. And yeah, as eyze said, wat about you preload them with a javascript preloader and display them in the right order?