Force download GET request using axios

by

You’re getting empty PDF ’cause no data is passed to the server. You can try passing data using data object like this

  axios
    .post(`order-results/${id}/export-pdf`, {
      data: {
        firstName: 'Fred'
      },
      responseType: 'arraybuffer'
    })
    .then(response => {
      console.log(response)

      let blob = new Blob([response.data], { type: 'application/pdf' }),
        url = window.URL.createObjectURL(blob)

      window.open(url) // Mostly the same, I was just experimenting with different approaches, tried link.click, iframe and other solutions
    })

By the way I gotta thank you so much for showing me the hint in order to download pdf from response. Thank ya 🙂

                var dates = {
                    fromDate: 20/5/2017,
                    toDate: 25/5/2017
                }

The way in which I have used is,

axios({
  method: 'post',
  url: '/reports/interval-dates',
  responseType: 'arraybuffer',
  data: dates
}).then(function(response) {
  let blob = new Blob([response.data], { type: 'application/pdf' })
  let link = document.createElement('a')
  link.href = window.URL.createObjectURL(blob)
  link.download = 'Report.pdf'
  link.click()
})

More Related Contents:

  1. Vue.js dynamic images not working
  2. Vuejs Error: The client-side rendered virtual DOM tree is not matching server-rendered
  3. Vuex state on page refresh
  4. Vuejs and Vue.set(), update array
  5. [Vue warn]: Property or method is not defined on the instance but referenced during render
  6. How to watch store values from vuex?
  7. NavigationDuplicated Navigating to current location (“/search”) is not allowed
  8. How to listen for ‘props’ changes
  9. Passing props dynamically to dynamic component in VueJS
  10. Accessing Vuex state when defining Vue-Router routes
  11. Vue JS: Difference of data() { return {} } vs data:() => ({ })
  12. Vue.js: Conditional class style binding
  13. Is there any way to ‘watch’ for localstorage in Vuejs?
  14. how to fix ‘Access to XMLHttpRequest has been blocked by CORS policy’ Redirect is not allowed for a preflight request only one route
  15. VueJS/Typescript – Cannot find module ‘./components/Navigation’ or its corresponding type declarations
  16. Access vue instance/data inside filter method
  17. Vue v-on:click does not work on component
  18. Vue template or render function not defined yet I am using neither?
  19. Global data with VueJs 2
  20. Passing props with programmatic navigation Vue.js
  21. Vue.js – update router view
  22. How to use Vuetify tabs with vue-router
  23. Importing javascript file for use within vue component
  24. How to limit iteration of elements in `v-for`
  25. Axios request giving getter setter methods instead of data queried
  26. When should I use Vuex?
  27. Vue JS returns [__ob__: Observer] data instead of my array of objects
  28. VueJS conditionally add an attribute for an element
  29. Vue.js – Add class to clicked button
  30. How to pass an object as props with vue router?

Leave a Comment