0

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?

1 Answers1

0

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.