Way to download a pdf file when button clicked?

Questions
1

Hi, Has anyone done anything where you click a button and it autodownloads a pdf. I want to do this as I am digitizing my project portfolio, and I want my resume to be downloadable
Any advice on how to do this best in F7 (or f7vue) would be greatly appreciated as not sure if there is anything inbuilt or not!

Cheers
Sam

2

You try with a href with class=“external”.?

1 Like
3

Ahh fab, yeah I cahnged it to Resume
And it worked a treat, before I was doing F7-link external with a tag inside with the href which didnt work!
Thank you!

4

You ca use response.Promise.Get with header to download any file. With file tranfer plugin save in a local folder of tour device

5

i tried everything but still cant download any pdf…

6

Vue example

<template>
   <f7-button @click="downloadLocalFile('/files/example.pdf')">
      Download
   </f7-button>
</template>

<script>
export default {
 methods: {
  downloadLocalFile($URL) {
      let url = encodeURI($URL);
      let link = document.createElement('a');
      link.href = url;
      link.download = url;
      link.click();
    }
  }
}
</script>
2 Likes
7

it can work on mobile???

8

i want to download online pdf…in mobile.

9

There are several options, the last one I used is Capacitor.js. The logic basically:

  1. First you download it remotely
  2. then you re-download it to the user on the phone
import {Http} from '@capacitor-community/http';
import {Directory, Filesystem} from '@capacitor/filesystem';

const options = {
              url: url, //remote file
              filePath: localFile, //local file name
              fileDirectory: Directory.Data, //'Downloads'
              method: 'GET',
              progress: true //
            };

Http.addListener('progress', ($Event) => {
    //progress logic
    //console.log('progress:', $Event);
    //console.log($Event.type);
    //console.log($Event.url);
    //console.log($Event.bytes + ' / ' + $Event.contentLength);
});
Http.downloadFile(options)
  .then(($Result) => {
     //step #2 re-download it again
  })
  .catch(($Error) => {
     //console.error($Error);
});
1 Like