JavaScript로 직접 다운로드할 때 Blob 파일 이름을 어떻게 사용자 정의할 수 있습니까?

JavaScript에서 직접 다운로드를 위한 Blob 파일 이름 사용자 정의

소개

window.location을 사용하는 경우 JavaScript에서 Blob 파일을 강제로 다운로드하려면 다운로드한 파일 이름이 자동으로 생성됩니다. 이 파일 이름을 사용자 정의하려면 추가 단계가 필요합니다.

FileSaver.js 트릭을 사용한 솔루션

한 가지 해결 방법은 FileSaver.js에서 사용하는 것과 유사한 기술을 활용하는 것입니다.

1. 숨겨진 태그.
2. href 속성에 blob의 URL을 할당합니다.
3. 다운로드 속성을 사용하여 원하는 파일 이름을 설정합니다.
4. tag.

간단한 예

function saveData(data, fileName) {
  var json = JSON.stringify(data),
      blob = new Blob([json], {type: "octet/stream"}),
      url = window.URL.createObjectURL(blob);
  var a = document.createElement("a");
  document.body.appendChild(a);
  a.style = "display: none";
  a.href = url;
  a.download = fileName;
  a.click();
  window.URL.revokeObjectURL(url);
}

var data = { x: 42, s: "hello, world", d: new Date() },
    fileName = "my-download.json";

saveData(data, fileName);

FileSaver.js 사용

위의 방법은 작업을 수행하는 경우 파일 저장을 위해 보다 강력한 FileSaver.js 라이브러리를 사용하는 것이 좋습니다. JavaScript:

import { saveAs } from 'file-saver';

var json = JSON.stringify(data),
    filename = "my-download.json";

var blob = new Blob([json], {type: "octet/stream"});
saveAs(blob, filename);

고려 사항

• 이전 브라우저는 HTML5 기능이므로 다운로드 속성을 지원하지 않을 수 있습니다.
• 확실함 파일 형식은 안전하지 않은 것으로 간주되어 다운로드를 차단할 수 있습니다. .txt 확장자로 JSON 파일을 저장하면 이 문제를 완화할 수 있습니다.

위 내용은 JavaScript로 직접 다운로드할 때 Blob 파일 이름을 어떻게 사용자 정의할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!