I would like to make a web app using Google Apps Script where users get pages of a pdf shown one by one.
Using a pdf library I can get the base64 data of each page of the pdf. But using none of these ways for displaying it works:
<object type="application/pdf" data="data:application/pdf;base64,...">
<embed src="data:application/pdf;base64,...">
<iframe src="data:application/pdf;base64,...">
Displaying an image using <img src="data:image/png;base64,..."> does work.
All mentioned methods do display the single pdf page when putting it in an html-document.
I thought it had to do with the https requirement mentioned on https://developers.google.com/apps-script/guides/html/restrictions, but looking at How can I refer to a Data URI in https? I learned the data URI should be https (since the Google web app is served over https).
Any suggestion, like forcing the data URI to be 'interpreted' as an https-URI OR converting the pdf page to an image (not prefered, since I figure it would produce unnecessary overhead), is welcome.
Since the single page pdfs aren't needed to be saved like that, saving each page on Google Drive and using its file-URL would also produce overhead (and is thus not prefered either).
If your pdf is located on your Google Drive, you can embed it with the preview link:
<iframe src="https://drive.google.com/file/d/XXX/preview"></iframe>
Whereby XXX is to be replaced with the file id.
Make sure to share the pdf as Anyone on the Internet with this link can view.
Related
I am using HTML with JSF application in my project and also used ClickJack filter option. First I try iFrame, Object, embed for view pdf portion. I refer path in tomcat folder
<iframe src="/path/file.pdf"/>
at the time browser to show error message is To help protect the security of information you enter into this website,
the publisher of this content does not allow it to be displayed in a frame..
So I need any other way to display pdf or doc file in browser is possible?
Chrome, Edge, and other modern browsers can read PDF files within the browser natively. If you use a link like so:
My PDF
It should open a window like this:
I'm building a very simple component in Vue to preview PDF files and images in a modal.
I'm using Vue Boostrap's modal component. In the body of the modal I have the following line:
<embed :src="fileSrc" type="application/pdf" height="100%" width="100%">
fileSrc is a prop that the component receives.
When the modal is launched, the PDF visualizer doesn't show and Google Chrome emits a warning saying:
Flash is blocked on this page
I have allowed flash to be displayed on the page but still doesn't work.
If I remove the type="application/pdf" attribute and the fileSrc is a JPEG file, it shows up just fine.
I've also tried with the <object> tag with no luck.
What should I check? What am I missing?
Edit: Why is this question not a duplicate?
Because I wan't to be able to use the <embed> tag to support not only PDF but also images for previewing. The examples in this page work without enabling Flash and without warnings, so I should be able to reproduce this behavior.
I found the answer.
The files I was trying to display with the <embed> were being uploaded to a bucket in AWS S3. When uploading the files (with a PHP script), the Content-Type metadata needed to be set accordingly to the file (i.e. application/pdf for PDF files).
The files were being uploaded with a default Content-Type value, thus the browser didn't know what to do with it once placed in a <embed> tag (the Content-type is used to determine which plugin to choose to display).
I found this method to be very easy to implement as a generic file previewer.
I'm trying to embed my resume into a page on my weebly website. I've saved the file as a pdf, allowed link sharing, and followed the steps for embedding documents from Google docs. I've gotten as far as getting the file to display within the weebly app, but it doesn't appear live on the site once I publish it. The page just appears blank, though additional space appears to be taken up. Perhaps an important note is that I'm using my ipad to do this.
Here is the custom HTML code I'm using within iframe generated from the above mentioned website:
<iframe style="width: 900px; height: 900px;" src="http://docs.google.com/gview?url=https://ivanglinski.weebly.com/uploads/5/7/9/5/57950797/ivan_glinski_resume_3_24.pdf&embedded=true" height="240" width="320" frameborder="0">
Every Weebly site comes with an "Embed Code" element which is available in the Weebly Editor (while building/editing/updating your site and its pages).
Get the "embed code" from Google for the GDrive doc you want to embed.
Drag an instance of the "Embed Code" element onto the page of your Weebly site where you want the GDrive doc to be displayed.
Click on the element you just instantiated, and paste the "embed code" from Google for the GDrive doc (from step 1) into the appropriate configuration field of the Embed Code element.
Publish your site
Test things are working, and if not, you may need to adjust permissions on the GDrive doc.
I am having trouble accessing images in the chrome packaged app. These images are stored locally. Code works fine in the browser.
following image tag
<img ng-src="pics/{{employee.pic}}">
I am using angularjs.
Thanks,
Niranjan
See:
https://developer.chrome.com/apps/app_external#external
What you have to do is fetch the binary contents of the image with XMLHttpRequest as a blob, then convert that blob to an object URL, and that's the URL you set as the src attribute of the img. It's easier than it sounds, and the cited web page gives you the code.
I have an application that uses Google Drive for document storage and preview functionality, but recently the iFrames that the documents are loading into are not displaying anything. Upon inspection of the console, Chrome declares that it blocked the fram from running insecure content, and that is why the file preview did not load.
The initial call to preview this file is to a url that looks like this:
https://docs.google.com/document/d//preview
There is a redirect along the way that takes the following form but because it uses http instead of https, Chrome blocks the content from loading.
http://www.google.com/url?sa=p&q=https://www.google.com/accounts/ServiceLogin?service%3Dwise%26passive%3Dtrue%26go%3Dtrue%26continue%3Dhttps://docs.google.com/document/d//preview?pref%253D2%2526pli%253D1
Is there any way around this issue? It is blocking a core functionality of my application currently, so any advice would be appreciated. I can provide a screenshot of the full stack of network loads in necessary, but this is the only URL that is not http compliant.
Thanks in advance for your help.
Hacked that. Add a "?pli=1" without quotes at the end of the URL to avoid redirect (after "/preview" or "/edit") and land directly to the document.