Vue.js 응용 프로그램에서 Excel 파일을 올바르게 다운로드하는 방법은 무엇입니까?

Vue.js 응용 프로그램에서 Excel 파일을 올바르게 다운로드하는 방법은 무엇입니까?

다운로드에 어려움을 겪고 있습니다.Excel줄을 지어 들어가다xlsx내 형식Vue.js어플.내 Vue.js 애플리케이션은 원격 SFTP 서버에서 Excel 파일을 다운로드하는 Node.js 애플리케이션에 게시 요청을 합니다.백엔드 애플리케이션은 문제 없이 작동합니다.

Vue.js 애플리케이션에서 다음 코드를 사용합니다.

axios.post(config.backendHost + '/excel', {
  file_name: fileName
}).then((response) => {
  const url = URL.createObjectURL(new Blob([response.data], {
    type: 'application/vnd.ms-excel'
  }))
  const link = document.createElement('a')
  link.href = url
  link.setAttribute('download', fileName)
  document.body.appendChild(link)
  link.click()
});

브라우저에서 파일을 다운로드한 후 파일이 자동으로 열리고 다음과 같은 오류가 발생합니다.

일부 콘텐츠에서 문제를 발견했습니다..xlsx우리가 할 수 있는 한 최대한 회복하기를 원하십니까?

응답 유형을 포스트 콜의 세 번째 인수로 추가해야 합니다.

{
    responseType: 'blob'
}

그런 당신의 최종 코드.

axios.post(config.backendHost + '/excel', {
    file_name: fileName
}, {
    responseType: 'blob'
}).then((response) => {
    const url = URL.createObjectURL(new Blob([response.data], {
        type: 'application/vnd.ms-excel'
    }))
    const link = document.createElement('a')
    link.href = url
    link.setAttribute('download', fileName)
    document.body.appendChild(link)
    link.click()
});

또는 FileSaver.js 라이브러리를 사용하여 파일을 저장할 수 있습니다.

import FileSaver from 'file-saver'

axios.post(config.backendHost + '/excel', {
    file_name: fileName
}, {
    responseType: 'blob'
}).then((response) => {

    // response.data is a blob type
    FileSaver.saveAs(response.data, fileName);
});

내 사례는 성공했습니다.

  axios.get(`/api/v1/companies/${companyId}/export`, {
    responseType: 'blob',
  }).then((response) => {
    const url = URL.createObjectURL(new Blob([response.data]))
    const link = document.createElement('a')
    link.href = url
    link.setAttribute(
      'download',
      `${companyId}-${new Date().toLocaleDateString()}.xlsx`
    )
    document.body.appendChild(link)
    link.click()
  })

언급URL : https://stackoverflow.com/questions/58024246/how-download-excel-file-in-vue-js-application-correctly