How to download fetch response in react as file

Question

Here is the code in actions js  export function exportRecordToExcel record        return   fetch     gt             type  EXPORT RECORD TO EXCEL          payload                promise  fetch   records export                     credentials   same-origin                   method   post                   headers    Content-Type    application json                    body  JSON stringify data                 then function response                    return response                                       The returned response is an  xlsx file  I want the user to be able to save it as a file  but nothing happens  I assume the server is returning the right type of response because in the console it says   Content-Disposition attachment  filename  report xlsx    What I m I missing  What should I do in the reducer

User · Answer

You can use these two libs to download files http://danml.com/download.html https://github.com/eligrey/FileSaver.js/#filesaverjs

example

//  for FileSaver
import FileSaver from 'file-saver';
export function exportRecordToExcel(record) {
      return ({fetch}) => ({
        type: EXPORT_RECORD_TO_EXCEL,
        payload: {
          promise: fetch('/records/export', {
            credentials: 'same-origin',
            method: 'post',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify(data)
          }).then(function(response) {
            return response.blob();
          }).then(function(blob) {
            FileSaver.saveAs(blob, 'nameFile.zip');
          })
        }
      });

//  for download 
let download = require('./download.min');
export function exportRecordToExcel(record) {
      return ({fetch}) => ({
        type: EXPORT_RECORD_TO_EXCEL,
        payload: {
          promise: fetch('/records/export', {
            credentials: 'same-origin',
            method: 'post',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify(data)
          }).then(function(response) {
            return response.blob();
          }).then(function(blob) {
            download (blob);
          })
        }
      });

User · Answer

I managed to download the file generated by the rest API URL much easier with this kind of code which worked just fine on my local      import React   Component  from  quot react quot       import  saveAs  from  quot file-saver quot        class MyForm extends Component        constructor props            super props           this handleSubmit   this handleSubmit bind this              handleSubmit event            event preventDefault            const form   event target          let queryParam   buildQueryParams form elements            let url    http   localhost 8080    whatever     queryParam           fetch url                method   GET               headers                       whatever                                        then function  response                        return response blob                                                 then function blob                    saveAs blob   quot yourFilename xlsx quot                                catch error   gt                      whatever                           render             return                lt form onSubmit  this handleSubmit  id  quot whateverFormId quot  gt                   lt table gt                       lt tbody gt                       lt tr gt                           lt td gt                               lt input type  quot text quot  key  quot myText quot  name  quot myText quot  id  quot myText quot   gt                           lt  td gt                           lt td gt  lt input key  quot startDate quot  name  quot from quot  id  quot startDate quot  type  quot date quot   gt  lt  td gt                           lt td gt  lt input key  quot endDate quot  name  quot to quot  id  quot endDate quot  type  quot date quot   gt  lt  td gt                       lt  tr gt                       lt tr gt                           lt td colSpan  quot 3 quot  align  quot right quot  gt                               lt button gt Export lt  button gt                           lt  td gt                       lt  tr gt                        lt  tbody gt                   lt  table gt               lt  form gt                      function buildQueryParams formElements        let queryParam    quot  quot          do code here          return queryParam     export default MyForm

User · Answer

I needed to just download a file onClick but I needed to run some logic to either fetch or compute the actual url where the file existed  I also did not want to use any anti-react imperative patterns like setting a ref and manually clicking it when I had the resource url  The declarative pattern I used was  onClick        gt         do something to compute or go fetch      the url we need from the server   const url   goComputeOrFetchURL          window location forces the browser to prompt the user if they want to download it   window location   url    render       return        lt Button onClick   this onClick     gt

User · Answer

I have faced the same problem once too  I have solved it by creating on empty link with a ref to it like so   linkRef   React createRef    render         return            lt a ref  this linkRef   gt             and in my fetch function i have done something like this   fetch   your params           then res   gt            return res blob           then blob   gt            const href   window URL createObjectURL blob           const a   this linkRef current          a download    Lebenslauf pdf           a href   href          a click            a href              catch err   gt  console error err      basically i have assigned the blobs url href  to the link  set the download attribute and enforce one click on the link  As far as i understand this is the  basic  idea of the answer provided by  Nate  I dont know if this is a good idea to do it this way    I did

User · Answer

Browser technology currently doesn t support downloading a file directly from an Ajax request  The work around is to add a hidden form and submit it behind the scenes to get the browser to trigger the Save dialog   I m running a standard Flux implementation so I m not sure what the exact Redux  Reducer  code should be  but the workflow I just created for a file download goes like this      I have a React component called FileDownload  All this component does is render a hidden form and then  inside componentDidMount  immediately submit the form and call it s onDownloadComplete prop  I have another React component  we ll call it Widget  with a download button icon  many actually    one for each item in a table   Widget has corresponding action and store files  Widget imports FileDownload  Widget has two methods related to the download  handleDownload and handleDownloadComplete  Widget store has a property called downloadPath  It s set to null by default  When it s value is set to null  there is no file download in progress and the Widget component does not render the FileDownload component  Clicking the button icon in Widget calls the handleDownload method which triggers a downloadFile action  The downloadFile action does NOT make an Ajax request  It dispatches a DOWNLOAD FILE event to the store sending along with it the downloadPath for the file to download  The store saves the downloadPath and emits a change event  Since there is now a downloadPath  Widget will render FileDownload passing in the necessary props including downloadPath as well as the handleDownloadComplete method as the value for onDownloadComplete  When FileDownload is rendered and the form is submitted with method  GET   POST should work too  and action  downloadPath   the server response will now trigger the browser s Save dialog for the target download file  tested in IE 9 10  latest Firefox and Chrome   Immediately following the form submit  onDownloadComplete handleDownloadComplete is called  This triggers another action that dispatches a DOWNLOAD FILE event  However  this time downloadPath is set to null  The store saves the downloadPath as null and emits a change event  Since there is no longer a downloadPath the FileDownload component is not rendered in Widget and the world is a happy place    Widget js - partial code only  import FileDownload from    FileDownload    export default class Widget extends Component       constructor props            super props           this state   widgetStore getState   toJS               handleDownload data            widgetActions downloadFile data              handleDownloadComplete             widgetActions downloadFile               render             const downloadPath   this state downloadPath           return                   button icon with click bound to this handleDownload goes here               downloadPath  amp  amp                   lt FileDownload                     actionPath  downloadPath                      onDownloadComplete  this handleDownloadComplete                    gt                                   widgetActions js - partial code only  export function downloadFile data        let downloadPath   null       if  data            downloadPath      apiResource    data fileName               appDispatcher dispatch           actionType  actionTypes DOWNLOAD FILE          downloadPath             widgetStore js - partial code only  let store   Map       downloadPath  null      isLoading  false         other store properties      class WidgetStore extends Store       constructor             super            this dispatchToken   appDispatcher register action   gt                switch  action actionType                    case actionTypes DOWNLOAD FILE                      store   store merge                           downloadPath  action downloadPath                          isLoading    action downloadPath                                             this emitChange                        break    FileDownload js - complete  fully functional code ready for copy and paste - React 0 14 7 with Babel 6 x   es2015    react    stage-0   - form needs to be display  none which is what the  hidden  className is for   import React   Component  PropTypes  from  react   import ReactDOM from  react-dom    function getFormInputs         const  queryParams    this props       if  queryParams     undefined            return null             return Object keys queryParams  map  name  index    gt            return                lt input                 key  index                  name  name                  type  hidden                  value  queryParams name                 gt                        export default class FileDownload extends Component        static propTypes             actionPath  PropTypes string isRequired          method  PropTypes string          onDownloadComplete  PropTypes func isRequired          queryParams  PropTypes object             static defaultProps             method   GET              componentDidMount             ReactDOM findDOMNode this  submit            this props onDownloadComplete               render             const  actionPath  method    this props           return                lt form                 action  actionPath                  className  hidden                  method  method               gt                   getFormInputs call this                lt  form gt

User · Answer

This worked for me  const requestOptions     method   GET   headers     Content-Type    application json        fetch    url    requestOptions   then  res    gt        return res blob        then  blob    gt        const href   window URL createObjectURL blob       const link   document createElement  a        link href   href      link setAttribute  download    config json      or any other extension     document body appendChild link       link click        catch  err    gt        return Promise reject   Error   Something Went Wrong   err

[javascript] How to download fetch response in react as file

Examples related to javascript

Examples related to reactjs

Examples related to flux

Examples related to reactjs-flux