javascript ajax 파일 다운로드

javascript ajax 파일 다운로드

XMLHttpRequest 개체는 일반 AJAX 요청을 만드는 데 사용됩니다. 그러나 이진 파일을 다운로드할 때 요청 개체의 responseType 속성이 Blob으로 설정됩니다. 때때로 나는 POST 요청에서 파일을 다운로드 할 필요성을 우연히 발견. 예를 들어 PDF 콘텐츠가 요청에 따라 달라지는 PDF 파일을 생성하는 경우를 예로 들 수 있습니다. 흥미롭게도 이것은 당신이 생각하는 것처럼 간단하지 는 않지만 그렇게 어렵지는 않습니다. 바이너리 파일을 다운로드하기만 하면 Blob을 응답 유형으로 사용합니다. 다운로드를 위해 페이지 로드에 여러 zip 파일을 만들어야 할 때 더 많은 문제가 발생합니다. 좋은 선생님 감사합니다! 이것은 내가 작업하고있는 반응 웹 앱에서 비 PDF 파일을 제공하는 데 엄청난 도움이되었습니다. 참고: 이 코드는 FPDF 라이브러리를 사용하여 PDF 파일을 생성합니다. 데모를 위해 pdf는 $_POST[`content`]의 콘텐츠로 채워져 있습니다. JPEG 이미지에 대한 httpbin.org 요청을 만들고 이전과 동일한 논리를 사용하여 이미지 데이터를 Blob에 로드하여 사용자 파일 시스템에 다운로드합니다. 헤더: { `수락`: `응용 프로그램/vnd.ms-excel` } 다운로드 .xlsx 파일에 도움이 됩니다.

요소의 다운로드 속성은 IE 10 및 11에서 작동하지 않습니다. 대안은 Blob 및 msSaveBlob 및 msToBlob 메서드를 사용하여 로컬로 파일 저장을 참조하십시오. 디렉터리 포함 파일을 읽고 addFile()를 사용하여 $zip 개체에 추가합니다. 일반적으로 클라이언트는 브라우저를 사용하여 서버에서 파일 다운로드를 처리합니다. 그러나이 방법은 새 브라우저 창, iframes 또는 기타 종류의 비우호적이고 해커 동작을 열어야합니다. 다운로드 요청에 추가 헤더 정보를 추가하는 것도 어렵습니다. 더 나은 해결책은 XMLHttpRequest 또는 요청 라이브러리와 함께 HTML5 파일 API를 사용하는 것입니다. 이 기술을 사용하면 ajax 요청에 필요한 모든 추가 속성을 우아하게 추가 할 수 있습니다. 당신은 좋은 Vue 또는 React 구성 요소에 래핑 할 수 있습니다.

내가 작업하는 웹 사이트에서 나는 (duh)에 채워야하는 양식을 가지고 있으며 사용자가 다운로드를 클릭할 때 데이터는 ajax로 전송되고 $config->ajax가있는 ProcessWire API를 사용하여 동일한 파일에서 처리됩니다. 파일 API를 사용하면 브라우저에서 파일을 생성, 로드 및 조작할 수 있습니다. Blob을 사용하여 메모리 내 파일을 만들 수 있습니다: Zip 파일 생성은 사용자가 하나의 패키지에서 여러 파일을 다운로드할 수 있는 더 좋은 방법입니다. 이는 파일 수와 크기에 따라 페이지 로드 시간에 영향을 줄 수 있습니다. 추가 작업의 비트와 함께, 우리는 우리의 파일 시스템에이 파일을 다운로드할 수 있습니다: 글쎄, 쉽게 divs에서 수직으로 콘텐츠를 중심으로! (플렉스 박스는 바람을 피우고있다!) 감사합니다, 그것은 일했다. 내가 donwload없이 PDF 파일을 포함하려는 경우 내가 누군가에게 링크를 보낼 때, 그들은 파일을 다운로드 할 수 없습니다, 왜 해야 합니까? 당신을 사랑해요.. 누구든지 당신이 `다시 … 내 목숨을 구했다!!!! 또 다른 100 년 동안 젊은 살고 ..!! 😀 😀 link.click() 추가한 후: LINK.parentElement.removeChild(LINK) 감사합니다! «콘텐츠 처리»-header에서 파일 및 파일 이름의 유형을 설정하려면 다음과 같이 사용할 수 있습니다 : 파일을 다운로드한 다음 파일의 바이트를 조작해야하는 복잡한 경우 (예 : 자바 스크립트 «PPT Viewer»를 빌드하는 경우 arraybuffer를 응답 유형으로 설정하십시오). 좌절의 몇 시간 후 응답을 발견유형 : `Blob`, (내가 찾았던 곳 어디에서도 언급되지 않았다) 그건, 요 다운로드 PDF를 할 수 있었다.

정말 고마워요! 결과 : 파일이 다운로드되었지만 크기는 1kb이며 손상된 백 엔드 응답 : { «버전»: {«main»: {1, «major»: «main»: «빌드»: -1, «개정»: -1, «majorRevision»: -1, «사소한 개정»: -1, «사소한 개정»: -1, «사소한 개정»: -1} «콘텐츠»: {{«키»: {«콘텐츠»: {«콘텐츠», «콘텐츠», «콘텐츠», «콘텐츠» 파일 이름 =Ai_2019-01-10_22-08.pdf» ] }, {«키»: «콘텐츠 유형», «값»: [«응용 프로그램/pdf»] }, {«키»: «콘텐츠 길이», «값»: [39122″] } } , «statusCode»: 200, «reasonPhrase»: «OK», «headers»: [], «requestMessage»: null, «isSuccessStatusCode»: true} 하지만 경우에 따라 웹 응용 프로그램 자체를 처리 하 고 싶을 수도 있습니다.

No Comments

Sorry, the comment form is closed at this time.