Display PDF viewer inside the Google Apps Script Dialog - javascript

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

How to display a pdf document within an iframe by google docs viewer stored in firebase storage?

I have an iframe in which I want to put a preview of my pdf document hosted in firebase storage through google docs viewer. I am creating the html view in javascript dynamically and adding it by jquery's ('.someClass').html() method.
I tried to plug in the download url of the document to the iframe directly and it works just fine and displays the preview.
But I can't get it to display the preview through google docs.
What I meant is that this works just fine:
....making my html on the fly in javascript
myHtml+='<iframe src="'+downloadUrlFirebaseStorage+'" width="100%" frameborder="0"/>'
....making remaining rest of my html on the fly in javascript
$('.someClass').html(myHtml);
But this gets me an error:
....making my html on the fly in javascript
myHtml+='<iframe src="https://docs.google.com/viewer?url='+downloadUrlFirebaseStorage+'&embedded=true" width="100%" frameborder="0"/>'
....making remaining rest of my html on the fly in javascript
$('.someClass').html(myHtml);
The error I get is this:
Refused to display 'https://docs.google.com/gview?url=https://firebasestorage.googleapis.com/v0/b/habiganjmedicalcollege.appspot.com/o/documents%2FSampleDoc.pdf?alt=media&token=51df7c93-0c59-46a4-9229-267bc527705b%26embedded=true' in a frame because it set 'X-Frame-Options' to 'sameorigin'
I just had to encode the URI and change the '%26' to '&':
var encodedUrl = encodeURIComponent(downloadUrlFirebaseStorage);
....making my html on the fly in javascript
myHtml+='<iframe src="https://docs.google.com/viewer?url='+encodedUrl+'&embedded=true" width="100%" frameborder="0"/>'
....making remaining rest of my html on the fly in javascript
$('.someClass').html(myHtml);
try this :
<iframe src="https://drive.google.com/viewerng/viewer?url=https://library.osu.edu/assets/Documents/SEL/QuickConvertWordPDF.pdf?pid=explorer&efh=false&a=v&chrome=false&embedded=true" width="400px" height="300px" />
and go to Link

Opening a file as pop up in MyWebsite

I am developing a website where user can upload multiple files (pdf,doc,xlsx....)
later i display the available files list to user ...When he/she clicks on the file name i want to open the file as a popup.
What I tried using iframes
https://docs.google.com/viewer?url=http://example.com/files/pages.doc
I am getting nothing..Can anyone Provied exact way to do it??`
<iframe width="560" height="315" src="https://docs.google.com/viewer?url=http://example.com/files/pages.doc" frameborder="0" allowfullscreen></iframe>
`
Just provide a link to the document like this:
Open document http://example.com/files/pages.doc
And let the browser work out how to launch it, it will either use a viewer, or launch an app to display it

How to copy original URL from a iframe?

I have to display multiple site pages on my website.
I would like to display one page from each site on a single page.
I guess it is best to use iframe?
How could a user copy the URL of the original webpage out of the iframe?
Currently I use YouTube embedded iFrame
<iframe width="560" height="315"
src="https://www.youtube.com/embed/8gESFEtIx1A" frameborder="0"
allowfullscreen>
</iframe>

Show the PowerPoint presentation in web page using html

I trying to display my ppt with long time where the screen should run continuously in web page where the file is in my local folder but it is not showing in web page. The code is below :
<!DOCTYPE html>
<html>
<body>
<iframe src="lp.ppt" width="800px" heigt="600px" name="iframe_a"></iframe>
</body>
</html>
can anyone help to display ppt in html page.
You can use Google Docs to serve as your document viewer. You just need to upload your file and use the share link as the iframe src.
You can get the embed code by uploading your file and opening it in google docs (in this case, Google Slides) then click the file tab and click the Publish to the Web. From there you can copy the embed code. Make sure that the file is public! :)
<iframe src="https://docs.google.com/presentation/d/17nlO95lz91-shRep16UiJl-3EAxv-MnOFH718ku2gtw/embed?start=false&loop=false&delayms=3000" frameborder="0" width="960" height="749" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true"></iframe>
<iframe src="https://docs.google.com/presentation/d/17nlO95lz91-shRep16UiJl-3EAxv-MnOFH718ku2gtw/embed?start=false&loop=false&delayms=3000" frameborder="0" width="960" height="749" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true"></iframe>
Hope this helps!

embed tag not displaying pdf file on mobile browsers

I used embed tag to show a pdf file on my html page and it is displaying the pdf file very well on a desktop and laptop browser but that is not showing the pdf file on moblie and talbets , is there any way I can make them appear on mobile as well .
Here is the concerned code :
<embed src="assets/img/jimbosmenu.pdf" width="900" height="900">
Here is the link to live page .
http://jimbosjoint.com/menu
You need to use object, not embed
<object data="filename.pdf" type="application/pdf" width="100%" height="100%">
<p>Your web browser doesn't have a PDF plugin.
Instead you can <a href="filename.pdf">click here to
download the PDF file.</a></p>
</object>
show it from google docs like that:
<object width="900" height="900" data="https://docs.google.com/gview?embedded=true&url=http://jimbosjoint.com/assets/img/jimbosmenu.pdf"></object>
The <embed> tag is outdated. Consider using the <object> tag. However, it might be a better option to link to the PDF file, so the mobile user can view it in full screen.
<object> tag will not display pdf on mobile chrome; The solution is to use <iframe>:
<iframe src="filename.pdf" title='SOME_TITLE' />

Categories