PDF Embed API with Google Drive as source

Report · Jan 18, 2023

Hi Guys,

I wonder if anyone would be able to help.

I'm using the PDF Embed API on a shopify page to attempt to display a PDF which is on Google Drive.

I've tried a few different ways to make it work - I think the main problem is that Google Drive doesn't supply a direct download link to files.

I have almost got it working, I think - using the following string, appended with the document ID from Google Drive:

"https://docs.google.com/uc?export=download&confirm=no_antivirus&id=DOCUMENT_ID_HERE"

However the PDF doesn't load, and the console has the following error:

No 'Access-Control-Allow-Origin' header is present on the requested resource.

Has anyone successfully used a PDF stored on Google Drive as a source, and if so - could you let me have any tips/pointers? The documentation page mentions Google Drive as a possible source - so I'm sure it may be possible.

Thank you!

Report · Jan 18, 2023

Sorry, code would be helpful!

<div id="adobe-dc-view"></div>
<script src="https://documentservices.adobe.com/view-sdk/viewer.js"></script>
<script type="text/javascript">// <![CDATA[
	document.addEventListener("adobe_dc_view_sdk.ready", function(){ 
		var adobeDCView = new AdobeDC.View({clientId: "55b682eeda6e4adc9d2b9847df669d5e", divId: "adobe-dc-view"});
		adobeDCView.previewFile({
			content:{location: {url: "https://docs.google.com/uc?export=download&confirm=no_antivirus&id=1V_aoEwslhUOCZFxfgGWLNG0etdwBubbW"}},
			metaData:{fileName: "Bodea Brochure.pdf"}
		}, {});
	});
// ]]></script>


<div id="adobe-dc-view"></div>
<script src="https://documentservices.adobe.com/view-sdk/viewer.js"></script>
<script type="text/javascript">
	document.addEventListener("adobe_dc_view_sdk.ready", function(){ 
		var adobeDCView = new AdobeDC.View({clientId: "CLIENT_ID", divId: "adobe-dc-view"});
		adobeDCView.previewFile({
			content:{location: {url: "https://docs.google.com/uc?export=download&confirm=no_antivirus&id=DOCUMENT_ID"}},
			metaData:{fileName: "Filename Here"}
		}, {});
	});
</script>

I've removed my client ID and the document ID, but they are both valid - and my client ID is linked to the correct site and so on. I'm able to use a file from the site, no problem - just struggling with Google Drive PDFs.

Report · Jan 26, 2023

You'll need to get the file using the Google Drive API. You won't be able to use just a URL due to CORS restrictions. Once you have the file contents, you can pass it to Embed API via a Promise that resolves to an ArrayBuffer.

Report · Jan 18, 2023

If the remote server, in this case Google Drive, doesn't provide the right CORS headers, you're out of luck. As I don't think they want folks using it for web hosting, I don't believe you'll be able to get this working.