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

Publishing help General
1

Hi,

I’d like to be able to automatically download a PDF by visiting a link with no suffix: eg. http://mydomain.com/mypdf

Note that the file should download automatically when the link is visited - ie. no need to click a link on the ‘mypdf’ page.

I know how to do this using traditional FTP hosting but not using Webflow’s hosting - any ideas?

Thanks

2

Duplicate of:

Dropbox: Ability to upload/store files, code, PDF's, images, etc - #58 by ctrav

Google Drive: Files click to download? - #2 by ilikewebdesign

Custom download attribute workaround: Custom <a> attribute 'download' - #2 by vincent

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
4

Ah, he was just linking to the view page of the document in Google Drive, it’s just a wrapper to display a PDF, not the actual direct PDF link.

Do you need the PDF displayed in-browser (like above) or downloaded to the user’s download folder?

5

Hi Sam, the preferred behaviour was to use the browser’s native PDF viewer which then gives the option to download the file - the javascript redirect ended up working fine for this.

I’m glad this works for the client as I wouldn’t know how to automatically download the file to the user’s download folder!

6

This topic was automatically closed after 60 days. New replies are no longer allowed.