How to create PDF direct download link – with no click/button required?

Publishing help General
3

Hi @samliew

Thanks for the suggestions but none of these solutions did the trick – my client doesn’t want to use dropbox or googledrive (adding dl=1 means needing to add a clickable link to the page so does not automatically download when visiting the page (?) and he does not like the googledrive UI).

The custom <a download> attribute suggestion still required a link to be clicked from what I can see?

This comment in the first thread you suggested @ctrav appears to have a direct download link:

but I cannot figure out how he did this - what’s actually on the page that causes the PDF to be viewed directly?

I can offer another suggestion that has worked for me more or less: (EDIT, this is not a good solution as iOS does not embed PDFs nicely, see edit 3 below)

  1. Create a new page with the URL slug wanted eg. mywebflowsite/mypdf
  2. Upload your PDF file to the asset manager, then click the cog icon and right click on the download link and choose ‘copy link’ to copy the Webflow link
  3. Add an embed object to the page and give it width: 100vw and height: 100vh
  4. Paste this into the embed editor: <embed src="https://uploads-ssl.webflow.com/xxxxxxx.pdf" type="application/pdf" width="100%" height="100%" /> making sure to update the src with the link copied in step 2
  5. Publish

Then anybody visiting the page will see the PDF in their browser – the only problem is they have to use the browser’s own UI to download the file to their computer if they want. I can’t figure how to get the file to download directly.

EDIT: I also needed prevent the PDF from being indexed by google (they index PDFs by default), so I added Disallow: /*.pdf to projects settings > SEO > robots.

EDIT 2: It seems iOS has severe problems viewing embedded PDFs – distorting the pages, only showing the first page and not being scrollable… deal breaker.

EDIT 3: This is now the method I’m using to get the PDF directly viewable on all browsers (including iOS):

  1. Create a new page with the URL slug wanted eg. mywebflowsite/mypdf
  2. Upload your PDF file to the asset manager, then click the cog icon and right click on the download link and choose ‘copy link’ to copy the Webflow link
  3. Add this to the pages custom code 'before body tag:
    <script type="text/javascript"> window.location.replace("https://uploads-ssl.webflow.com");</script> making sure to update the URL with the link copied in step 2
  4. Publish

This allows the PDF to be viewed using the built-in PDF viewer in iOS and other browsers. The only down side is the URL has the “ssl.webflow.com…” and not ‘mydomain.com/mypdf’

1 Like