How to enable/display a download button in google docs gview embedded in a webview iframe

Question

I have a cordova/ionic app that is successfully embedding office files (IE: pdf, doc, xls) using gview in an iframe. However, the user can only just view the doc and there appears now way for the user to download the file.

https://docs.google.com/gview?url=" +$scope.docPath+ "&embedded=true"

The full iframe: <iframe id="viewerFrame" style="width:100%;height:100%;" frameborder="0" sandbox="allow-scripts allow-same-origin" ng-src="https://docs.google.com/gview?url=https://exmple.com/files/5372967.pdf?t=1694794056384&amp;embedded=true"></iframe>

The embedded link includes the options passed to google docs; so to enable a download button of some sort it must be included in the embedded link.

Context: As of Android 12+, due to the new scoped storage on Android apps can no longer download files directly to the phones common Downloads folder forcing you to use a different methodology. Using a standard anchor tag with download doesn't work in apps anyway. So I was trying to see if a native download button from within in the embedded document viewer would treat the download as a browser would versus as how an app would be doing it.

The embedded view has a "pop-out" button. But when embedded in an iFrame, the pop-out button causes the app to crash (i have no idea why)...so I am hiding the pop-out button.

There seems to be no official documentation for gview too. I did find this very limited SE on gview options, but nothing there indicates enabling a download button. https://webapps.stackexchange.com/questions/130654/all-google-docs-url-parameters-functions-commands

Is there any gview option that would display a functioning download button?

Answer 1

You can add a link yourself

 <div class="wrapper">
      <a href="https://exmple.com/files/5372967.pdf?t=1694794056384" download>Download</span>
      <iframe ...></iframe>
 </div>

 .wrapper{
      display: flex;
      height: 100%;
      flex-direction: column      
 }
 .wrapper > *{
      display: inline-block;
 }
 .wrapper > iframe{
      flex-grow: 1;
 }