react js에서 파일을 다운로드하는 방법
api에서 응답으로 파일 URL을 받았습니다.사용자가 다운로드 버튼을 클릭하면 새 탭에서 파일 미리 보기를 열지 않고 파일이 다운로드됩니다.반응 js에서 이를 달성하는 방법은 무엇입니까?
tldr: 파일을 URL에서 가져와 로컬 Blob으로 저장하고 링크 요소를 DOM에 삽입하여 클릭하여 Blob을 다운로드합니다.
S3의 Cloudfront URL 뒤에 PDF 파일을 저장해 두었는데, PDF 미리보기로 새 탭을 열지 않고 버튼을 클릭해서 바로 다운로드를 시작할 수 있도록 하고 싶었습니다.일반적으로 사용자가 현재 있는 사이트가 다른 도메인을 가진 URL에서 파일을 호스트하는 경우 사용자 보안상의 이유로 많은 브라우저에서 즉시 다운로드가 차단됩니다.이 솔루션을 사용하는 경우 사용자가 의도적으로 다운로드하는 버튼을 클릭하지 않는 한 파일 다운로드를 시작하지 마십시오.
이를 위해 다운로드한 파일의 소스가 되는 로컬 Blob을 저장하기 위해 CORS 정책을 둘러보는 URL에서 파일을 가져와야 했습니다.에서는 반드시 .fileURL,Content-Type , , , , 입니다.FileName.
fetch('https://cors-anywhere.herokuapp.com/' + fileURL, {
method: 'GET',
headers: {
'Content-Type': 'application/pdf',
},
})
.then((response) => response.blob())
.then((blob) => {
// Create blob link to download
const url = window.URL.createObjectURL(
new Blob([blob]),
);
const link = document.createElement('a');
link.href = url;
link.setAttribute(
'download',
`FileName.pdf`,
);
// Append to html link element page
document.body.appendChild(link);
// Start download
link.click();
// Clean up and remove the link
link.parentNode.removeChild(link);
});
이 솔루션은 URL에서 BLOB를 가져와 CORS 프록시를 사용하는 솔루션을 참조합니다.
업데이트 2021년 1월 31일부터 Heroku 서버에서 호스트되는 Cors-Anywhere 데모에서는 테스트 목적으로만 사용할 수 있으며 실제 가동 애플리케이션에서는 사용할 수 없습니다.cors-anywhere 또는 cors-server를 팔로우하여 자신의 cors-anywhere 서버를 호스트해야 합니다.
이것은 리액트와는 관계가 없습니다. 「」는 할 수 .download <a>파일을 다운로드하도록 브라우저에 지시합니다.
<a href='/somefile.txt' download>Click to download</a>
일부 브라우저에서는 지원되지 않습니다.https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a
리액트 라우터를 사용하고 있는 경우는, 다음의 순서를 사용합니다.
<Link to="/files/myfile.pdf" target="_blank" download>Download</Link>
서 ★★★★★/files/myfile.pdf네 안에 있어public더입니니다다
프런트 엔드에서 브라우저 다운로드를 트리거하는 것은 신뢰할 수 없습니다.
호출 시 올바른 응답 헤더로 응답하여 브라우저 다운로드를 트리거하는 엔드포인트를 서버에 만듭니다.
프런트 엔드 코드는 그 정도밖에 할 수 없습니다.예를 들어 'download' 속성은 브라우저 및 파일 형식에 따라 새 탭에서 파일을 열 수 있습니다.
할 는 '알겠습니다' 입니다.Content-Type ★★★★★★★★★★★★★★★★★」Content-Disposition이러한 헤더에 대한 자세한 설명은 이 답변을 참조하십시오.
브라우저는 다운로드 속성을 사용하지 않고 앵커태그를 클릭했을 때 링크를 검출하여 직접 다운로드 할 수 있습니다.
api에서 파일링크를 받은 후 앵커태그를 생성하여 플레인 Javascript를 사용하고 즉시 동적으로 클릭하여 삭제하면 됩니다.
const link = document.createElement('a');
link.href = `your_link.pdf`;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
솔루션(React JS, Next JS에 대한 완벽한 작업)
js-file-download를 사용할 수 있습니다.다음은 예를 제시하겠습니다.
import axios from 'axios'
import fileDownload from 'js-file-download'
...
handleDownload = (url, filename) => {
axios.get(url, {
responseType: 'blob',
})
.then((res) => {
fileDownload(res.data, filename)
})
}
...
<button onClick={() => {this.handleDownload('https://your-website.com/your-image.jpg', 'test-download.jpg')
}}>Download Image</button>
이 플러그인은 Excel 및 기타 파일 형식을 다운로드할 수 있습니다.
React에서는 이렇게 했습니다.
import MyPDF from '../path/to/file.pdf';
<a href={myPDF} download="My_File.pdf"> Download Here </a>
기본 파일 이름을 다음으로 덮어쓰는 것이 중요합니다.download="name_of_file_you_want.pdf"그렇지 않으면 다운로드 시 파일에 해시 번호가 첨부됩니다.
하면 보안 문제가 합니다.a를 달다target="_blank".
그렇게 작동시킬 수 있었습니다.
<a href={uploadedFileLink} target="_blank" rel="noopener noreferrer" download>
<Button>
<i className="fas fa-download"/>
Download File
</Button>
</a>
fetchFile(){
axios({
url: `/someurl/thefiles/${this.props.file.id}`,
method: "GET",
headers: headers,
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",
`${this.props.file.name}.${this.props.file.mime}`
);
document.body.appendChild(link);
link.click();
// Clean up and remove the link
link.parentNode.removeChild(link);
});
}
render(){
return( <button onClick={this.fetchFile}> Download file </button>)
}
import resume from '../assets/data/resume.pdf';
<a href={resume} download="YourName resume.pdf"> Download CV </a>
같은 문제가 있습니다.지금 사용하고 있는 솔루션은 다음과 같습니다.주의:Amazon S3에서 로드되는 Single Page Application React 앱에 파일을 긴밀하게 연결하기 때문에 이상적입니다.즉, S3에 저장되는 것과 같습니다. 어플리케이션에서는 S3의 위치를 알 수 있습니다.
순서
3단계:
- npmjs/package/file-saver 프로젝트에서 파일세이버를 사용합니다(
npm install file-saverthat뭔가) - 프로젝트에 파일을 배치합니다.컴포넌트 폴더에 있다고 합니다.웹 팩이 있으면 최소화할 수 있습니다.(컴포넌트 폴더에 있는 자산 파일을 웹 팩이 어떻게 처리하는지 지적해 주십시오.)그러므로 이 기능을 원하는 것은 아니라고 생각합니다.그래서 저는 자산을 다음 장소에 배치할 것을 제안합니다.
public「」, 「」resource★★★asset웹 름이 the the에 . 웹 팩은 이 웹 팩에public와 ""index.html리소스는 그대로 실가동 빌드로 복사됩니다.다음 단계에 나타낸 것처럼 참조할 수 있습니다. - 프로젝트의 파일을 참조합니다.샘플 코드:
import FileSaver from 'file-saver'; FileSaver.saveAs( process.env.PUBLIC_URL + "/resource/file.anyType", "fileNameYouWishCustomerToDownLoadAs.anyType");
원천
부록
- 도 ★★★★★★★★★★★★★★★★★★★★★★」
Link의react-routerreact-router-docs/링크.zip 파일이 다운로드되어 정상적으로 압축 해제됩니다.일반적으로 링크의 색상은 파란색입니다.부모 색상표를 상속하려면 다음과 같은 프로펠을 추가합니다.style={color: inherit}또는 단순히 CSS 라이브러리의 클래스를 할당합니다.button button-primaryBootstrapping을 하고 있다면요. - 기타 중요한 질문은 다음과 같습니다.
FileSaver.js를 사용하여 다음 목표를 달성할 수 있습니다.
const saveFile = () => {
fileSaver.saveAs(
process.env.REACT_APP_CLIENT_URL + "/resources/cv.pdf",
"MyCV.pdf"
);
};
<button className="cv" onClick={saveFile}>
Download File
</button>
구성 요소를 정의하고 어디에서나 사용할 수 있습니다.
import React from 'react';
import PropTypes from 'prop-types';
export const DownloadLink = ({ to, children, ...rest }) => {
return (
<a
{...rest}
href={to}
download
>
{children}
</a>
);
};
DownloadLink.propTypes = {
to: PropTypes.string,
children: PropTypes.any,
};
export default DownloadLink;
파일 다운로드
다운로드에 대해서는 위에서 설명한 바와 같이 여러 가지 방법을 사용할 수 있습니다.게다가 이 시나리오에 대한 전략도 제시하겠습니다.
npm install --save react-download-linkimport DownloadLink from "react-download-link";- 클라이언트 측 캐시 데이터에 대한 응답 다운로드 링크
<DownloadLink label="Download" filename="fileName.txt" exportFile={() => "Client side cache data here…"} /> - Promise를 사용하여 클라이언트 측 캐시 데이터 다운로드 링크
<DownloadLink label="Download with Promise" filename="fileName.txt" exportFile={() => Promise.resolve("cached data here …")} /> - URL에서 데이터를 가져오는 Promise 함수가 있는 URL에서 데이터 다운로드 링크
getDataFromURL = (url) => new Promise((resolve, reject) => { setTimeout(() => { fetch(url) .then(response => response.text()) .then(data => { resolve(data) }); }); }, 2000); - 가져오기 함수를 호출하는 DownloadLink 구성 요소
<DownloadLink label=”Download” filename=”filename.txt” exportFile={() => Promise.resolve(this. getDataFromURL (url))} />
해피 코딩!;)
우수하고 신속한 솔루션:
window.open('https://myapi.com/download/file-name')
다운로드 링크 문제를 해결한 패키지는 다음과 같습니다.
npm install --save react-module-link
다음과 같이 사용합니다.
fileDownload(axiosResponse.data, 'filename.csv');
예를 들어 백엔드 측에서 다음과 같은 C# Web API Endpoint를 만들 수 있습니다.
[HttpGet("GenerateSitemap")]
public async Task<IActionResult> GenerateSitemap()
{
var sitemapString = "[place-xml-sitemap-string-here]";
var serializedObj = JsonConvert.SerializeObject(obj);
var bytesObj = Encoding.UTF8.GetBytes(serializedObj);
return File(sitemapString.SerializeToByteArray(), "application/octet-stream");
}
react-download-link 컴포넌트를 사용하여 콘텐츠를 파일로 다운로드할 수 있습니다.
<DownloadLink
label="Download"
filename="fileName.txt"
exportFile={() => "Client side cache data here…"}/>
https://frugalisminds.com/how-to-download-file-in-react-js-react-download-link/
Brian Li의 답변은 좋은 답변이 많았지만, 저는 Brian Li의 답변이 좋았다고 생각합니다.fetch의 Content-Type은 데이터를 서버로 전송하고 수신하지 않을 때 사용합니다.
또한 새로고침되지 않은 장시간 지속되는 앱은 링크를 사용한 후 반드시 URL.revoke Object URL(url)을 실행하는 것이 중요합니다.링크를 사용하지 않는 경우 작성한 링크도 삭제해야 합니다. : )
서버 URL에서 다운로드(amazon s3)
유틸리티 함수 생성
export function download(url: string) {
const a = document.createElement("a");
a.href = url;
const clickEvnt = new MouseEvent("click", {
view: window,
bubbles: true,
cancelable: true,
});
a.dispatchEvent(clickEvnt);
a.remove();
}
사용방법:
download("link-to-file-in-server")
//Just change react <Link> tag to HTML <a> tag and pass the name of the file to the href attribute
<a
href={details.cv}
className="text-deep my-0"
download={details.cv}
target="_blank"
>
{details.first_name} CV
</a>
이 DownloadLink를 사용해 봤는데, 개발 도구를 사용하여 볼 수 있는 API에서 데이터를 가져오고 있지만 파일 다운로드를 트리거하지는 않습니다.내가 뭔가 놓친게 있는지 알아?
지금까지 사용한 것은 다음과 같습니다.
getDataFromURL = (url) => new Promise((resolve, reject) => {
setTimeout(() => {
fetch(url)
.then(response => response.text())
.then(data => {
resolve(data)
});
});
});
언급URL : https://stackoverflow.com/questions/50694881/how-to-download-file-in-react-js
'programing' 카테고리의 다른 글
| javascript를 사용하여 div를 angular로 인쇄합니다.JS 단일 페이지 응용 프로그램 (0) | 2023.04.01 |
|---|---|
| WordPress JSON API: ID별로 여러 게시물 검색 (0) | 2023.04.01 |
| 오류: [Home]이(가) 구성 요소가 아닙니다. 의 모든 구성 요소는 또는이어야 합니다. (0) | 2023.04.01 |
| babel-preset-es2015 모듈을 찾을 수 없습니다. (0) | 2023.04.01 |
| JsonNode를 ObjectNode로 변환하는 방법 (0) | 2023.04.01 |