In this article, you will learn how to create an option to download a PDF file from a web frontend application using Vue.js and JavaScript. The resulting function will be a reusable component that can be used anywhere in your application.

Creating the component

First, we will create a Vue.js component that contains the necessary logic to download a PDF file when a button is clicked.

<template>
  <div>
    <button @click="downloadPdf">download PDF</button>
  </div>
</template>

<script>
export default {
  name: 'DownloadPdfButton',
  props: {
    pdfUrl: {
      type: String,
      required: true
    },
    pdfFileName: {
      type: String,
      required: true
    }
  },
  methods: {
    downloadPdf() {
      // create element <a> for download PDF
      const link = document.createElement('a');
      link.href = this.pdfUrl;
      link.target = '_blank';
      link.download = this.pdfFileName;

      // Simulate a click on the element <a>
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
    }
  }
}
</script>

This component has two properties: pdfUrl and pdfFileName. pdfUrl is the path of the PDF file you want to download, while pdfFileName is the name of the file that will be displayed in the browser's download window. The downloadPdf function is responsible for creating an "a" link that points to the PDF file and simulates a click on it, triggering the file download.

Using the component

Now that we have created the component, we can use it anywhere in our application. To do this, we simply import the component and include it in the HTML code where we want the download button to appear. Here's an example:

<template>
  <div>
    <h1>Mi proyecto frontend</h1>
    <download-pdf-button :pdf-url="pdfUrl" :pdf-file-name="pdfFileName" />
  </div>
</template>

<script>
import DownloadPdfButton from '@/components/DownloadPdfButton.vue';

export default {
  name: 'MyProject',
  components: {
    DownloadPdfButton
  },
  data() {
    return {
      pdfUrl: '/path/to/my/file.pdf',
      pdfFileName: 'my-pdf-file.pdf'
    };
  }
};
</script>

In this example, we have imported the DownloadPdfButton component and included it in the HTML code using the tag. We have also created two variables in the Vue instance (pdfUrl and pdfFileName) which we pass as properties to the component. These variables represent the path of the PDF file and the name of the file, respectively.

In Vue Composable format

Here is an example of how you could create a composable for downloading PDFs in Vue.js:

<script>
export default function useDownloadPdf() {
  function downloadPdf(pdfUrl) {
    const link = document.createElement('a');
    link.href = pdfUrl;
    link.target = '_blank';
    link.download = 'my-pdf-file.pdf';
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
  }

  return {
    downloadPdf,
  };
}
</script>

In this example, the composable useDownloadPdf returns a function downloadPdf that takes the location of the PDF file as a parameter. The downloadPdf function creates an "a" link with the href, target, and download attributes, and then adds it to the document body and simulates a click on the link.

To use this composable in your component, you just need to import it and call the downloadPdf function passing the location of the PDF file as a parameter.

<template>
  <div>
    <button @click="downloadPdf('/path/to/my/file.pdf')">Descargar PDF</button>
  </div>
</template>

<script>
import useDownloadPdf from './useDownloadPdf';

export default {
  name: 'MyComponent',
  setup() {
    const { downloadPdf } = useDownloadPdf();

    return {
      downloadPdf,
    };
  },
};
</script>

In this example, the component imports the useDownloadPdf composable and calls the downloadPdf function in its setup method, passing the PDF file location as a parameter. The download button in the template calls the downloadPdf method when clicked.

Conclusion

Congratulations! Now you know how to create a feature to download PDF files in a frontend web application using Vue.js and JavaScript. In both cases, the code can be even shorter depending on which syntax you prefer to use in Vue. I hope this article has been useful to you and that you can apply this functionality in your future projects🙂.