199. (TWOK/LOGIC) [Web] 자바스크립트 HTTP URL 파일 열기 수행 시 윈도우 환경 인 경우 엑셀 , 워드 , 파워포인트 스키마 호출 앱 실행 열기 로직

---

[로직 정리]

​

정리 로직 : Web / JavaScript

​

제 목 : [Web] 자바스크립트 HTTP URL 파일 열기 수행 시 윈도우 환경 인 경우 엑셀 , 워드 , 파워포인트 스키마 호출 앱 실행 열기 로직

​

 

---

[설 명]

 

// --------------------------------------------------------------------------------------
[사전) 설정 및 정보 확인 사항]
// --------------------------------------------------------------------------------------

1. 제 목 : [Web] 자바스크립트 HTTP URL 파일 열기 수행 시 윈도우 환경 인 경우 엑셀 , 워드 , 파워포인트  스키마 호출 앱 실행 열기 로직


2. 테스트 환경 : Web / JavaScript / chrome


3. 사전) 👉 navigator.userAgent 간략 설명 :  

  >> navigator.userAgent 는 브라우저와 OS 정보를 담은 문자열입니다.

  >> navigator.userAgent 는 브라우저가 서버나 JS에게 "나는 이런 환경이야" 라고 알려주는 값입니다.

  >> navigator.userAgent 호출 시 표시 되는 예시 값 

    - Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/148.0.0.0 Safari/537.36

  >> 주의점 : 

    - navigator.userAgent 는 사용자나 브라우저가 쉽게 변경 가능하며, 100% 신뢰는 불가능합니다.


4. 사전) 👉 HTTP 응답 헤더 Content-Disposition 간략 설명 (ResponseContentDisposition) : 

  >> Content-Disposition 는 HTTP 표준 헤더 Content-Disposition을 설정하여 파일을 브라우저에서 열지(inline) 또는 다운로드 강제(attachment)할지 지정할 수 있습니다

  >> Content-Disposition 는 파일 다운로드 시 사용할 파일명을 지정할 수 있습니다

  >> Content-Disposition 'inline' 옵션 : 브라우저에서 바로 열기 (PDF, 이미지 등) / Content-Disposition: inline; filename="report.pdf"

  >> Content-Disposition 'attachment' 옵션 : 다운로드 강제 / Content-Disposition: attachment; filename="report.pdf"

// --------------------------------------------------------------------------------------






// --------------------------------------------------------------------------------------
[로직 설명]
// --------------------------------------------------------------------------------------

------------------------------------------------------
🟦 사전 정리) 로직 구현 관련 필요 내용 정리
------------------------------------------------------

1. 웹 브라우저에서 엑셀, 워드, 파워포인트 파일 형식이 포함 된 경우 윈도우 환경 체크 및 실제 앱 스키마 실행으로 열기 개발 요청


2. 이외의 형식 인 경우는 window.open 새창 열기를 통해서 파일 열기 수행


3. 파일 형식 필터링 참고 : 👉 PresignedUrl 인 경우 파일 확장자 포함 여부로 찾기 필요

  >> 엑셀 파일 찾기 : if (url.indexOf(".xlsx") >=0 || url.indexOf(".xlsm") >=0 || url.indexOf(".xlsb") >=0 || url.indexOf(".xls") >=0)

  >> 워드 파일 찾기 : if (url.indexOf(".doc") >=0 || url.indexOf(".docx") >=0 || url.indexOf(".docm") >=0 || url.indexOf(".dotx") >=0)

  >> 파워포인트 파일 찾기 : if (url.indexOf(".pptx") >=0 || url.indexOf(".ppt") >=0)



------------------------------------------------------
🟦 로직 정리) 자바스크립트에서 파일 URL 확인 및 윈도우 환경 체크 , 앱 스키마 실행 로직
------------------------------------------------------

1. 자바스크립트 window.onload 부분에서 접속 된 환경이 윈도우 브라우저 인지 확인 수행

  const userAgent = navigator.userAgent;

  if (String(userAgent).toLowerCase().indexOf('windows') >= 0){ // 윈도우 환경 인 경우

    // ... 코드 계속 ...
  }


2. 윈도우 환경이 맞는 경우 추가로 크롬 웹 브라우저 형식 인지 확인 수행  

  // -----------------------------------------------
  // 접속한 브라우저 체크 수행 : Chrome 이면서 Edge(Edg), Opera(OPR), SamsungBrowser 는 제외 처리
  // -----------------------------------------------
  // ✔️ Edge (Chromium) , Opera (Chromium) , Samsung Browser (Chromium 기반) 브라우저들은 크로미움 엔진 기반으로 User-Agent에 "chrome" 문자열이 포함됩니다.
  // -----------------------------------------------
  // ✔️ Safari / Firefox는 기본적으로 User-Agent 문자열에 "chrome"을 포함하지 않기 때문에, 일치하지 않는 브라우저는 자동으로 제외됩니다.
  // -----------------------------------------------            
  const userAgent = navigator.userAgent.toLowerCase();

  const isChrome = userAgent.includes("chrome") && !userAgent.includes("edg") && !userAgent.includes("opr") && !userAgent.includes("samsungbrowser");


3. 웹 접속 환경이 윈도우 및 크롬 브라우저 인 경우 하위 로직 처리 수행


4. 자바스크립트에서 특정 파일 확장자 포함 URL 형식 앱 스키마 및 window.open 으로 열기 수행


5. [IF] 윈도우 앱 스키마 형식 파일 확장자 체크 및 앱 스키마 열기 수행

  const fileUrl = 'https://twok2k.s3.ap-northeast-2.amazonaws.com/files/menu/APP_API.xlsx'; // 엑셀 파일 URL 주소 지정

  // --------------------------------------
  // ✅ ms-excel: 스키마 호출을 통해서 Excel 앱 실행 파일 열기 수행
  // --------------------------------------
  // 👉 ms-excel: 는 브라우저에서 Excel 앱을 실행시키는 전용 URI 스키마
  // 로컬에 Microsoft Excel 설치 필요
  // OS에 ms-excel: 프로토콜 등록 필요
  // 브라우저가 external protocol 허용 필요
  // --------------------------------------
  if (fileUrl.indexOf(".xlsx") >=0 || fileUrl.indexOf(".xlsm") >=0 || fileUrl.indexOf(".xlsb") >=0 || fileUrl.indexOf(".xls") >=0){
    window.location.href = `ms-excel:ofe|u|${fileUrl}`;
  } 

  // --------------------------------------
  // ✅ ms-word: 스키마 호출을 통해서 워드 앱 실행 파일 열기 수행
  // --------------------------------------

  // 👉 ms-word: 는 브라우저에서 워드 앱을 실행시키는 전용 URI 스키마
  // 로컬에 Microsoft Word 설치 필요
  // OS에 ms-word: 프로토콜 등록 필요
  // 브라우저가 external protocol 허용 필요
  // --------------------------------------
  if (fileUrl.indexOf(".doc") >=0 || fileUrl.indexOf(".docx") >=0 || fileUrl.indexOf(".docm") >=0 || fileUrl.indexOf(".dotx") >=0){
    window.location.href = `ms-word:ofe|u|${fileUrl}`;
  }

  // --------------------------------------
  // ✅ ms-powerpoint: 스키마 호출을 통해서 파워포인트 앱 실행 파일 열기 수행
  // --------------------------------------
  // 👉 ms-powerpoint: 는 브라우저에서 파워포인트 앱을 실행시키는 전용 URI 스키마
  // 로컬에 Microsoft PowerPoint 설치 필요
  // OS에 ms-powerpoint: 프로토콜 등록 필요
  // 브라우저가 external protocol 허용 필요
  // --------------------------------------
  if (fileUrl.indexOf(".pptx") >=0 || fileUrl.indexOf(".ppt") >=0){
    window.location.href = `ms-powerpoint:ofe|u|${fileUrl}`;
  } 


6. [ELSE] 앱 스키마 형식이 아닌 경우 window.open 으로 열기 수행

  const windowUrl = 'https://twok2k.s3.ap-northeast-2.amazonaws.com/files/menu/APP_API.txt';

  var windowName = "_blank"; // _blank : 새창 기본 / _parent : 부모에 포함됨 / _self : 현재 페이지 대체 / _top : 로드된 프레임셋 대체
  var windowWidth = w;
  var windowHeight = h;
  var windowTop = 100;    		
  var windowLeft = 100;
  var windowFullScreen = "no"; // yes
  var windowUrlUse = "no"; //yes
  var windowMenuUse = "no"; //yes
  var windowScrollUse = "yes"; //no
  var windowStateUse = "no"; //yes
  var windowTittleUse = "no"; //yes
  var windowToolbarUse = "no"; //yes
  var windowResize = "yes"; //no
  var windowHistory = true; // true : 현재 히스토리를 대체 / false : 히스토리에 새 항목
                    
  var formatOption = "";
  formatOption = formatOption + "width=" + windowWidth + ",";
  formatOption = formatOption + "height=" + windowHeight + ",";
  formatOption = formatOption + "toolbar=" + windowToolbarUse + ",";
  formatOption = formatOption + "scrollbars=" + windowScrollUse + ",";
  formatOption = formatOption + "resizable=" + windowResize + ",";
  formatOption = formatOption + "top=" + windowTop + ",";
  formatOption = formatOption + "left=" + windowLeft + ",";    		
  formatOption = formatOption + "replace=" + windowHistory + ",";
  formatOption = formatOption + "channelmode=" + windowFullScreen + ",";
  formatOption = formatOption + "status=" + windowStateUse + ",";
  formatOption = formatOption + "location=" + windowUrlUse + ",";
  formatOption = formatOption + "menubar=" + windowMenuUse + ",";
  formatOption = formatOption + "titlebar=" + windowTittleUse + ",";
  formatOption = formatOption + "toolbar=" + windowToolbarUse;

  console.log("[openLinkUrlPopup] : [windowUrl] : " + windowUrl);
  console.log("[openLinkUrlPopup] : [windowName] : " + windowName);
  console.log("[openLinkUrlPopup] : [windowOption] : " + formatOption);

  window.open(windowUrl, windowName, formatOption); // 윈도우 창 오픈 실시



------------------------------------------------------
🟦 참고 사항) 앱 스키마 열기 수행 시 앱 열기 팝업창 표시 건
------------------------------------------------------

1. 앱 스키마 열기 수행 시 앱 열기 팝업창이 표시 됩니다.


2. 사용자는 팝업창에서 앱 열기를 클릭해야 정상적으로 애플리케이션이 수행 됩니다.

// --------------------------------------------------------------------------------------






// --------------------------------------------------------------------------------------
[참고 사이트]
// --------------------------------------------------------------------------------------

▶️ [Web/JavaScript] 자바스크립트 userAgent 사용해 접속 브라우저 윈도우 환경 체크 및 엑셀 , 워드 스키마 앱 실행 수행

https://kkh0977.tistory.com/8857

https://blog.naver.com/kkh0977/224297134775


▶️ [간단 소스] 자바스크립트 ms-powerpoint 스키마 호출을 통해 파워포인트 앱 실행 및 파일 열기 수행 - open scheme file

https://kkh0977.tistory.com/8862

https://blog.naver.com/kkh0977/224298281869


▶️ [간단 소스] 자바스크립트 접속 한 브라우저 환경이 윈도우 환경 인지 확인 - is windows browser

https://kkh0977.tistory.com/8846

https://blog.naver.com/kkh0977/224294530021


▶️ [간단 소스] 자바스크립트 navigator.userAgent 사용해 접속한 브라우저 크롬 chrome 인지 확인 수행 - isChrome

https://kkh0977.tistory.com/8735

https://blog.naver.com/kkh0977/224238606185


▶️ [navigator (네비게이터) 사용해 브라우저 정보 확인 실시 - userAgent , cookieEnabled]

https://kkh0977.tistory.com/853

https://blog.naver.com/kkh0977/222393616945?trackingCode=blog_bloghome_searchlist


▶️ [navigator platform 사용해 pc 및 모바일 접속 확인, navigator userAgent 사용해 접속한 모바일 종류 확인]

https://kkh0977.tistory.com/873

https://blog.naver.com/kkh0977/222399340657?trackingCode=blog_bloghome_searchlist

// --------------------------------------------------------------------------------------

 

---

[참고 사이트]

​

https://kkh0977.tistory.com/8857

190. (TWOK/UTIL) [Web/JavaScript] 자바스크립트 userAgent 사용해 접속 브라우저 윈도우 환경 체크 및 엑셀

---