Categories
Vue Answers

How to download a PDF file with Vue.js?

Spread the love

To download a PDF file with Vue.js, we can create an object URL from the PDF blob response, assign the URL as the value of the href property of an anchor element.

And them we call anchor’s click method to download it.

For instance, we write

<script>
//...
export default {
  //...
  methods: {
    async downloadFile() {
      const response = await this.$http.get("/test.pdf", {
        responseType: "arraybuffer",
      });
      const blob = new Blob([response.data], { type: "application/pdf" });
      const link = document.createElement("a");
      link.href = window.URL.createObjectURL(blob);
      link.download = "test.pdf";
      link.click();
    },
  },
  //...
};
</script>

to call $http.get with the PDF URL where $http.get is the Axios get method.

We set responseType to 'arraybuffer' to download the response as an array buffer.

Next, we convert the response to a blob with the Blob constructor.

Then we create a link with createElement.

Then we set its href property to the object URL created from createObjectURL called with blob.

And then we set link.download to the file name of the downloaded file.

Finally, we call click to download it.

By John Au-Yeung

Web developer specializing in React, Vue, and front end development.

One reply on “How to download a PDF file with Vue.js?”

Leave a Reply

Your email address will not be published.