I want to display a PDF inside a Dialog of a Google Spreadsheet Add-on Dialog.
more about apps script dialog can be found here
https://developers.google.com/apps-script/guides/html/
<iframe id="iframe" src="https://www.w3docs.com/uploads/media/default/0001/01/540cb75550adf33f281f29132dddd14fded85bfc.pdf" frameborder="0" height="500px" width="100%"></iframe>
When I inspect, I see the message Resource interpreted as Document but transferred with MIME type application/pdf: "https://www.w3docs.com/uploads/media/default/0001/01/540cb75550adf33f281f29132dddd14fded85bfc.pdf".
Answer:
You can embed the Google viewer to display the PDF using an <iframe>.
Code:
<iframe src="https://docs.google.com/viewer?url=https://www.w3docs.com/uploads/media/default/0001/01/540cb75550adf33f281f29132dddd14fded85bfc.pdf&embedded=true" height="1080" width="1920"></iframe>
Just make sure to change the height and width attributes of the <iframe>.
Related
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.
I'm using in my site with Google docs iframe to preview PDF files and last 2 weeks I have problem preview some of them, really don't understand why some are ok.
I'm using it like this:
<iframe id="pdfviewer" src="http://docs.google.com/gview?embedded=true&key=AIzaSyAnlkbh2TXRyCQMMWj2LQ6EY1fdqxNHf14&url=http://s3.amazonaws.com/DvarMalchus/chumash/דברים/נצבים/6.pdf&embedded=true" frameborder="0" width="100%" height="100%"></iframe>
I got this error - "no preview available":
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");
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.
I've got a html form submitting to a pdf using cfdocument.
Within that pdf, I have a link at the bottom that goes to another policy. I need that link to open up on a new page, rather than _self.
I've tried using Jquery to open the window and not sure if that is even possible, but wasn't successful to say the least.
So basically, I've got.
<cfdocument format="pdf">
stackoverflow
</cfdocument>
Not possible. Case closed!
Reason:
For my purpose, I'd need to be able to open another pdf in a browser window, but in order to do that, you would have to download the second one to Acrobat or another reader you've got.
Also, you're not able to use jquery to create the new window.
PDF
Or with JQuery
PDF
$(document).ready(function(){
$('#openPdfLink').click(function(){
window.open(this.href);
return false;
});
});