Yii mpdf render not working when the webpage contains images and buttons - pdf

I need to convert a html page(with images, buttons and a lot of css) to PDF and I'm using yii.
I chose mPDF over HTML2PDF(no particular reason for that.) When I render a page for converting to PDF, the PDF doesn't load, but when I use renderPartial, the page loads(only the html part works here).
I want the page to be completely converted to PDF and I tried going through the mPDF documentation but I couldn't 'find' anything useful.
this is my code :
$mPDF1 = Yii::app()->ePdf->mpdf();
$mPDF1->WriteHTML(
$this->render('render_page',
array( ...),
true ));
//Output PDF file
$mPDF1->Output();
Please let me know if I have to provide more informations...

Related

Fit PDF page in container using ngf-thumbnail

I have the following line of code to embed pdf in HTML
<embed ngf-thumbnail="factura.picFile" id="factura_prev_pdf" ng-show="factura.preimageext=='pdf'" class="view_complete_image" type='application/pdf'>
As you can see I'm using ngf-thumbnail to show the pdf.
Javascript attached to the id just get the extension, not important here.
ng-show say true if extension id pdf and the css class adapt the pdf to the container size.
The thing is that the pdf preview is adapted to the width and height but the page is not visualized entirely.
Any idea ?
I saw things like Zoom to fit: PDF Embedded in HTML
But it doesn't work to me since I'm not using
EDIT what I see now is that you can modify a pdf url like http.thingthing.pdf#view=fit to make page fit but my files are loaded from local so it creates a blob:url where I cannot put this view=fit.
It's possible to convert this blob url to a normal url with the pdf extension?
Finally I achieved the following:
<img ngf-thumbnail="factura.picFile" id="factura_prev_image" class="view_complete_image">
<embed ngf-thumbnail="factura.picFile" id="factura_prev_pdf" ng-show="factura.preimageext=='pdf'" class="view_complete_image" type='application/pdf'>
<img src="{{ factura.image.url }}" ng-show="factura.preimage && factura.preimageext=='jpg'" id="factura_image" class="view_complete_image">
<embed src="{{ factura.image.url }}#view=fit" ng-show="factura.preimage && factura.preimageext=='pdf'" class="view_complete_image" type='application/pdf'>
As you can see, in the first 2 lines I'm using ngf-thumbnail... This two fields contains local files so to visualize it we get a Blob Url, in this way I couldn't add the #view=fit that allows me to visualize the entire pdf page.
In the last 2 lines we get pdf's that are uploaded to a server so we get a normal url.
In this way I can add the #view=fit so the page fits.
Hope it helps to someone.
This answer is to know how to fit a pdf page, but I'm not answering to fit the page when we get a Blob Url.

Embedding a external pdf link to my webpage without uploading the pdf file to server

I have a external link to pdf(http://du.ac.in/du/uploads/Admissions/Cut-off/2016/First/290620161st_Cut_Off_DU_1.pdf). I want to show this pdf on my webpage without uploading this file to my server. Basically i want a pdf view embeded code but with the downloadable link of pdf file.
I'm reporting part of an answer of another question, should work
I recommend checking out PDFObject which is a Javascript library to embed PDFs in HTML files. It handles browser compatibility pretty well and will most likely work on IE8.
In your HTML, you could set up a div to display the PDFs:
<div id="pdfRenderer"></div>
Then, you can have Javascript code to embed a PDF in that div:
var pdf = new PDFObject({
url: "http://du.ac.in/du/uploads/Admissions/Cut-off/2016/First/290620161st_Cut_Off_DU_1.pdf",
id: "pdfRendered",
pdfOpenParams: {
view: "FitH"
}
}).embed("pdfRenderer");

How do I render a PDF from HTML with working named anchors?

Is there a way for a bunch of named anchors in a large html to be clickable within a PhantomJs generated PDF file?
I.e. say I have a table of contents or a list of FAQ questions. When clicking on the question/title - I'm taken to its answer/content within the same HTML file which is great but when the same HTML is rendered into a PDF each named anchor becomes an absolute URL (i.e. http://example.com/render.html#anchor_1) so clicking on it opens a browser with that URL instead of jumping to its content within the PDF file.
So, basically, is it possible (and how?) for a markup like this - https://fiddle.jshell.net/jyjuaaog/ to work within the generated PDF?
BTW, this works great when "printing as a PDF file" in Google Chrome but links end up broken when rendered in PhantomJs so there must be something I'm missing that I can't seem to find in the docs.
Any ideas?
Thanks!
Apparently there's a bug in PhantomJs preventing this. As suggested by PhantomJsCloud a quick-and-dirty workaround would be to replace the links with page links.

Delaying the pdf generation when using ExpertPdf converter

I am using ExpertPdf html to pdf converter to convert a web page to pdf. It works fine with most pages, but when I try to convert a page with HighCharts javascript charts on it, only part of the charts are rendered.
My guess is that rendering those charts take longer. Is there a way to delay the pdf generation and allow the full page to load?
You need to set the ConversionDelay property of the PdfConverter object to a few seconds. Also make sure that javascript is enabled.
PdfConverter converter = new PdfConverter();
converter.ConversionDelay = 2;
converter.ScriptsEnabled = true;
byte[] pdf = converter.GetPdfBytesFromUrl(url);
You can find support resources for ExpertPdf here:
http://www.html-to-pdf.net/Support.aspx

Embedd scrollable document faster than PDF possible?

I have a page of about 10 embedded PDF docs. My question is there another option that would use smaller file sizes or something so they don't bogg down the page when visited? Even convert PDF to something else if possible. Right now they are all in an accordion jquery and run with Scribd. Maybe something similar to this would work.:
scrolling text box
If you want the jqueryui to download different data for each tab you need to put an empty div inside each section and then set an on open (I am not familiar with jqueryui but maybe the activate event?) and create an ajax call to get the relevant pdf and save it to the empty div.
There are lots of questions about ajax in jqui accordion here here and here for example.