Embed PDF File Hosted on Google Drive on Website - javascript

There is a team drive full of PDFs.
I have set up oauth2 and can successfully login users. They can then enter in a file Id and my site will return all of the metadata for that file.
However I cannot seem to embed this PDF file. In the metadata there are two urls:
webContentLink
webViewLink
I tried creating an iFrame with both links but neither work.
Is this even possible to do?
I am using JS to do all of this and I am requesting the https://www.googleapis.com/auth/drive.metadata.readonly scope.

webContentLink and the embeddable link have minor differences.
webContentLink:
https://drive.google.com/file/d/PDF_DRIVE_ID/view?usp=drivesdk
Embed URL:
https://drive.google.com/file/d/PDF_DRIVE_ID/preview
Right now, I haven't seen a direct API method to fetch the embedabble link but if you plan to do this by code, you can just manipulate the webContentLink so that it removes the view?usp=drivesdk part and replace it with preview.
Sample snippet:
<iframe src="https://drive.google.com/file/d/PDF_DRIVE_ID/preview" width="640" height="480"></iframe>

Related

How to display pdf using iframe in Microsoft Teams

I have a C# pdf comparison app hosted on azure and i just want to display the compared pdf in iframe. This is working fine in a browser but when i am integrating it to teams the compared pdf is not showing in iframe. After clicking on compare button the output pdf is downloaded automatically but nothing is being display in iframe.
This is the block of code which i am using for embedding:
success: function (Data) {
if (Data) {
var embed1 = document.getElementById('outputPdf');
embed1.src = "../../PythonFile/OutputPdf/" + Data;
$("#outputPdf").css("display", "block");
}
},
<iframe id="outputPdf" type="application/pdf" style="display:none;width:100%" height="600"></iframe>
#Asif Hussain:
In Microsoft Teams, we have only be able to download the PDF file in "Files". It's not possible to precise the download file name or the download file location.
The use of PDF's needs to be improved with Microsoft Teams. There is no official solution - we have been waiting for one for a while. As workarounds, you could always look at using the Third Party Adobe applications, or if a PDF (s) is hosted on a site, look to use a web page tab and see if the ability to manipulate on the site pulls through.

Script to create URL from file ID in Google Docs

I'm trying to figure out if there is a way using a script in a Google Doc to create a dynamic link to a Google Doc to download it as a PDF.
File links in Google Docs look like this:
https://docs.google.com/document/d/FILEID/edit
To download/save the file as a PDF this link is required:
https://docs.google.com/document/d/FILE_ID/export?format=pdf
So I'm wondering if it would be possible using a script to fetch the file ID and create the PDF link above and then recall that link in the actual document (as a link or bookmark?).
In the actual document it would for example say "Download as PDF", and would have a link to the script result for https://docs.google.com/document/d/FILE_ID/export?format=pdf.
I thought I'd reach out and see if someone knows if it can be done.
NOTE: All above links point to non-existent resources and are provided for illustration only.
Thanks

How to download a file from dropbox using Javascript

I have a pdf file stored in dropbox. I have an URL to access that pdf file. The format of the URL is something like this https://www.dropbox.com/s/myPDF.pdf.
Now I need to use this URL in my angular application to download that PDF file and show it's content.
I need to display the pdf in the same webpage as my application. I used tag for achieving this. But I got the error saying Refused to display the pdf in a frame because it set 'X-Frame-Options' to 'SAVEORIGIN'.
I am new to dropbox. I need to know how to download this pdf and show it's content in my angular application by using the URL given above.
I understand your problem buddy. You dont need javascript for this, it can be done with simple and "anchor" tags.
Write the code as follows:
<a href="https://www.dropbox.com/s/myPDF.pdf">
<button>Download pdf</button>
</a>
Now, when the user clicks the button, the file will be downloaded.

How to show a google drive html link that is shared with specific people in iframes in google site

For displaying a google drive html document in an iframe, we first share the file "Public on the web" and take the documnet ID of it. Then this is appended to hosting link(https://googledrive.com/host/) (running this link on browser will display the output of the html file, instead of simply displaying the contents of that file) and given as src to iframe tag.
But my requirement is not to share the file publicly, since it has sensitive information. We can set the permission of the google site in such a way that only specific people can access it. For that, the html file should still be shared publicly, which shouldn't happen in my case.
Also, in this case, appending document ID of the file whose permission is restricted to hosting link (https://googledrive.com/host/) will give 404 error. Kindly help me on this. Advance thanks.
One solution is to run code that gets the contents of the HTML file, then use an Apps Script Gadget with HTML Service to display the HTML file.
Add a Google Apps Gadget to your Site.
Go into the scripts section of your site.
Create a new Apps Script script
write code to get the HTML file contents
return that HTML
Add the script to the gadget
The HTML file in your drive will NOT need to be shared with anyone. The Apps Script however, must run as YOU, in order to access the file.
This code injects the HTML into the Apps Gadget when the Site opens. I've tested it, and it works. It gets a HTML file from my Drive, converts the HTML to a String, then serves the HTML into the Site:
function doGet() {
var fileHTML = DriveApp.getFileById('The file ID');
var theHTML = fileHTML.getBlob().getDataAsString();
return HtmlService.createHtmlOutput(theHTML)
.setSandboxMode(HtmlService.SandboxMode.IFRAME);
};
To get the file ID of an HTML file in your Drive, right click on the file name, and choose "GET LINK". Then copy the link. Inside that link is the file ID.

Google Apps Script How to link to JS or CSS file on Google Drive

Can I keep style.css or anyscript.js hosted on a folder on Google Drive and then include the script with a link to the file in Drive? If so.. how?
And here I mean GAS for use on Google Sites... so the script is not located in Google Drive
Google seem to have changed it.
At the time of writing, a link to the raw data works with the following link format:
https://drive.google.com/uc?id=YOUR_DOCUMENT_ID
UPDATE: As of August 31, 2015 this technique has been deprecated by Google.
Google recent made it possible host a file publicly on Google Drive:
Create a folder in Google Drive
Put any files you want to access publicly in the folder
Share it publicly (needs to be "Public on the web") and copy the folder ID from the "Link to Share". For example, the folder ID from this link: https://docs.google.com/folder/d/0B5AR8ct5SZfSTDZTQjNNVXR4RWM/edit ... is: 0B5AR8ct5SZfSTDZTQjNNVXR4RWM
The URL for each file will be https://googledrive.com/host/ followed by the folder id followed by the filename. For example: if you saved style.css in the folder in step #1: https://googledrive.com/host/0B5AR8ct5SZfSTDZTQjNNVXR4RWM/style.css
What about Google's own recommendation in the HTML Service Best practices, for Separating HTML, CSS and Javascript?
It still works, the URLs just look a bit different.
Answered already over here, but the steps are:
On the folder with your intended file (e.g. FILE.css), hit Sharing Settings, then Advanced, then select "Public on the web - Anyone on the Internet can find and view."
In the URL bar (or share link), copy everything after the drive.google.com/drive/u/0/folders/
Use that ID to replace the XX-XXXXXXXXXXXXX in: http://googledrive.com/host/XX-XXXXXXXXXXXXX/FILE.css
Navigate to the appended URL in Step 3 and you will now see your raw data.
Credit to #chris.huh at: https://productforums.google.com/forum/#!topic/drive/MyD7dgLJaEo
I found out that the direct link workaround has changed a bit. You can download any file using the following url now:
https://drive.google.com/uc?export=download&id=[PutYourIdHere]
This is how you extract the id of your file:
https://drive.google.com/file/d/1gIax1-2397HJFLSJFOIUWEIJ23/view?usp=sharing
Here 1gIax1-2397HJFLSJFOIUWEIJ23 is the ID

Categories

Resources