Download PDF File in a Web Application with Vue.js and JavaScript.
Tags: vue, javascript, tutorial, frontend
Published: 2023-04-27 17:27:30

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.


```js
<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:


```js
<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 **<download-pdf-button>** 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.

------------------------


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5c7ntzo1auaa26kno4x7.png)
## In Vue Composable format

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


```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.

```js
<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🙂.