JS를 사용하여 HTML 브라우저 내보내기 및 다운로드를 만드는 방법

이 기사에서는 주로 JS를 사용하여 HTML 브라우저 내보내기 다운로드를 만드는 방법을 공유합니다. 주로 html5의 다운로드 속성과 Blob을 사용합니다.

URL.createObjectURL

URL.createObjectURL() 메소드는 전달된 매개변수를 기반으로 매개변수 개체를 가리키는 URL을 생성합니다. 이 URL의 수명은 새 개체 URL이 생성된 문서에만 존재합니다. 실행된 File 객체 또는 Blob 객체를 가리킵니다.

objectURL = URL.createObjectURL(blob || file);1

File 객체 또는 Blob 객체
여기에서는 File 객체와 Blob 객체에 대해 간략하게 설명하겠습니다.
File 객체는 예를 들어 input type="file" 태그를 사용하여 파일을 업로드하면 내부의 각 파일은 File 개체입니다.
Blob 개체는 이진 데이터입니다. 예를 들어 new Blob()을 통해 생성된 개체는 Blob 개체입니다. . 또 다른 예를 들어, XMLHttpRequest에서 responseType이 blob이면 반환 값도 blob 개체입니다.
*참고
createObjectURL이 호출될 때마다 이미 URL 개체를 생성한 경우에도 마찬가지입니다. 이 객체가 더 이상 필요하지 않은 경우 이를 해제하려면 URL.revokeObjectURL() 메서드를 사용해야 합니다. 브라우저는 페이지가 닫힐 때 자동으로 객체를 해제하지만 최적의 성능과 메모리 사용을 위해 다음 사항을 확인하세요. 더 이상 필요하지 않으면 이를 해제해야 합니다.

URL.revokeObjectURL

URL.revokeObjectURL() 메서드는 URL.createObjectURL()을 통해 생성된 개체 URL을 해제합니다. 이 URL이 더 이상 해당 파일을 가리킬 필요가 없다는 것을 브라우저가 알게 되면 이 메소드를 호출해야 합니다.
구체적인 의미는 객체 URL이 이 URL을 사용하여 지정된 파일에 액세스할 수 있다는 것입니다. 한 번 액세스하면 개체 URL이 더 이상 필요하지 않으며 해제됩니다. 해제된 후에는 개체 URL이 더 이상 지정된 파일을 가리키지 않습니다.
예를 들어 사진의 경우 개체 URL을 생성하고 그런 다음 이 개체 URL을 통해 이 그림을 내 페이지에 로드했습니다. 로드되었으며 이 그림을 다시 로드할 필요가 없으므로 이 개체 URL을 해제하면 이 URL이 더 이상 이 그림을 가리키지 않습니다.

window.URL.revokeObjectURL(objectURL);1

파일 방법 다운로드

var funDownload = function (content, filename) {
    var eleLink = document.createElement('a');
    eleLink.download = filename;
    eleLink.style.display = 'none';    // 字符内容转变成blob地址
    var blob = new Blob([content]);
    eleLink.href = URL.createObjectURL(blob);    // 触发点击
    document.body.appendChild(eleLink);
    eleLink.click();    // 然后移除
    document.body.removeChild(eleLink);
};

관련 권장 사항:

html 브라우저에 잘못된 코드가 표시됨_html/css_WEB-ITnose

위 내용은 JS를 사용하여 HTML 브라우저 내보내기 및 다운로드를 만드는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!