0

I'm trying to display two buttons to either preview a file(usually a PDF) in an iframe, or download the file directly(not open the file url in the browser or new tab).

I'm building a wordpress site that runs on nginx. I added nginx headers to force pdf files to download, and i'm using the download attribute on the <a> element that links to the download. I'm using jquery to popup a modal window, and create an iframe with src attribute of the file url, then append the iframe to the modal window.

The download button works, but when I append the iframe to the document, instead of embedding the PDF in the iframe, it downloads the file and the iframe is empty.

If I turn off the nginx header for content disposition attachment, then the download button doesn't work - it opens the PDF at the file url in the browser, rather than immediately downloading. But with the header turned off, the iframe works.

Is there a way to specify in the nginx headers that if it's an iframe, don't have this content-disposition? Or some other way around this?

I am rebuilding a site, and this functionality actually exists on the old site, but I don't have any sort of access to the technical aspects of the old site, so I can't figure out how it's working.

Old site where this works: https://www.worldoceansday.org/youth-advisory-council-resources

New site where this doesn't work: http://worldoceansday.kinsta.cloud/resources/

Nginx headers:

location ~* '\/([^<>:;,?"*|\/]+\.pdf)$' {
    add_header Content-disposition "attachment; filename=$1";
}

jquery to add iframe with file embed

var url = $(this).data('file-url');
var iframe = '<iframe id="resource-iframe" class="resource-iframe" frameborder="0" vspace="0" hspace="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen="" allowtransparency="true" src="' + url + '" scrolling="auto"></iframe>
iframe.attr('allowtransparency','true');
$('#resource-modal-inner').html(iframe);
Greg Nemes
  • 1
  • As far as I know nginx doesn't recognize iframes... How about you define those "embeddable" files in a different location... And add a specific Nginx directive specific to that location where they don't get downloaded. It could be done with a rewrite rule – Bilel Feb 04 '20 at 02:40
  • You can try this https://stackoverflow.com/questions/3077242/force-download-a-pdf-link-using-javascript-ajax-jquery – Manash Kumar Feb 04 '20 at 03:02
  • 1
    @ManashKumar suggestion is better than adding more directives to your server. If you insist on using Nginx to force download, there is a workaround using url arguments and check if parameters are being used with Pdf files... like 101.pdf?d=1 – Bilel Feb 04 '20 at 03:29

0 Answers0