[javascript] 콘텍스트 메뉴에서 파일 다운로드 기능 추가하기

11 Dec 2023

javascript

웹 애플리케이션을 개발할 때 종종 파일을 다운로드할 수 있는 기능을 제공해야 할 때가 있습니다. 사용자가 파일을 다운로드할 수 있도록 하는 한 가지 방법은 콘텍스트 메뉴에 “다운로드” 메뉴를 추가하는 것입니다. 이를 통해 사용자가 웹 페이지 내에서 파일을 더욱 쉽게 다운로드할 수 있게 됩니다.

1. HTML과 JavaScript로 구현

우선 HTML과 JavaScript를 사용하여 콘텍스트 메뉴에서 파일을 다운로드할 수 있는 기능을 구현해보겠습니다.

1.1 HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>File Download Context Menu</title>
</head>
<body>
    <p>우클릭하여 파일을 다운로드하세요.</p>
</body>
</html>

1.2 JavaScript

document.addEventListener("DOMContentLoaded", function () {
    document.body.addEventListener("contextmenu", function (e) {
        e.preventDefault();
        const downloadLink = document.createElement("a");
        downloadLink.href = "파일경로"; // 다운로드할 파일 경로 설정
        downloadLink.download = "파일명"; // 다운로드될 파일의 이름 설정
        downloadLink.click();
    });
});

2. 결과 확인하기

위의 HTML과 JavaScript 코드를 이용하여 웹 페이지를 작성하고, 해당 페이지에서 마우스 우클릭을 하게 되면 설정된 파일이 다운로드될 것입니다.

이렇게 콘텍스트 메뉴에서 파일을 다운로드할 수 있는 기능을 추가함으로써 사용자들은 더욱 편리하게 파일을 다운로드할 수 있게 됩니다.

이상으로, 콘텍스트 메뉴를 통해 파일 다운로드 기능을 추가하는 방법에 대해 알아보았습니다.