>

안녕하세요 라 라벨에서 새로운 사람과 reactjs를 만나서 질문이 있습니다. 서버에서 브라우저로 파일을 다운로드하려고합니다. 내 요청은 괜찮지 만 원하는 파일을 읽을 수 없습니다 (브라우저 네트워크를 마우스 오른쪽 버튼으로 클릭하면 미리보기를 읽을 수 없습니다.). 파일도 다운로드되지 않습니다. Windows 코딩에 Visual Studio 코드를 사용했습니다.

DownloadController :

public function download()
{
    $file = public_path()."/file.pdf";
    return response()->download($file);
}

routes/api.php :

Route::get('download','Api\DownloadController@download');

Js 파일에서 :

import React, { Component } from 'react';
import axios from 'axios';
export default class download extends Component{
    constructor () {
        super();
    }
    componentDidMount() {
            axios.get(`http://127.0.0.1:8000/api/download`)
                .then((response) => {
                    console.log('hello');
                });
    }
    render() {
        return (
            <div>
                <button onClick={this.componentDidMount.bind(this)} className="btn btn-primary">Download</button>
            </div>
        );
    }
}


  • 답변 # 1

    API 소비에 대한 axios 호출에 익숙해야하지만 응답으로 파일을 가져 와서 해당 파일을 사용자에게 다운로드하여 다운로드하는 것은 어떻습니까. 우리는 당신의 커버를 얻었습니다. 아래 스 니펫은 테스트되어 잘 작동합니다.

    axios({
      url: 'http://api.dev/file-download',
      method: 'GET',
      responseType: 'blob', // important
    }).then((response) => {
       const url = window.URL.createObjectURL(new Blob([response.data]));
       const link = document.createElement('a');
       link.href = url;
       link.setAttribute('download', 'file.pdf'); //or any other extension
       document.body.appendChild(link);
       link.click();
    });
    
    

    이 Javilobo의 유용한 솔루션에 대한 크레딧.

    https://github.com/kennethjiang/js-file-download/blob/master/file-download.js에서 IE 다운로드 항목을 처리하는 방법을 확인할 수 있습니다.

  • 답변 # 2

    컨텐츠를 보내기 전에 헤더와 변환을 사용할 수 있습니다. 이 라인 강제 브라우저는 사용자 정의 콜렉션 또는 모델에서 XML 파일을 다운로드합니다.

    $response = Response::create(strval($someCollection), 200);
    $response->header('Content-Type', 'text/xml');
    $response->header('Cache-Control', 'public');
    $response->header('Content-Description', 'File Transfer');
    $response->header('Content-Disposition', 'attachment; filename=custome_filename.xml');
    $response->header('Content-Transfer-Encoding', 'binary');
    return $response;
    
    

    파일이 준비되면 내용을 읽을 필요가 없으므로 다음을 사용할 수 있습니다.

    return response()->download($pathToFile, $name, $headers);
    
    

    그리고 $headers  위와 같은 예의 배열이 될 수 있습니다 :

    $header = ['Content-Type' => 'text/xml'];
    
    
    더 많은 사용자 정의 key => value

    Axios를 사용할 필요가 없습니다 ... React 또는 순수 JS와 같이 Laravel 쪽에서 엔드 포인트 URL을 직접 호출 할 수 있습니다.

    window.location.href = window.YOUR_API_DOWNLOAD_URL;
    
    

  • 이전 com - Silverlight 5의 Arg_COMException 오류
  • 다음 angular - 'map'속성이 정의되지 않은 이유는 무엇입니까?