invoice pdf 처리 이슈

[mooooburg-dev]

invoice pdf 파일 생성 및 표시가 불안정함.
화면표시가 안정적이어야 하고 크롬, 사파리, 태블릿(아이패드, 갤탭)을 지원하야 함.

[mooooburg-dev]

크롬 / 사파리 분기 처리가 필요
pdf 영역을 iframe, object, embed 등으로 처리함에 있어 사파리쪽 표시가 제대로 되지 않음

[mooooburg-dev]

pc 크롬
브라우저내 pdf 자체 프린트 버튼이 있어서 프린트 가능

pc 사파리
object.print() 불가 / printThis() 플러그인 불가 / window.print()로 pdf를 포함한 브라우저 전체 화면은 가능하지만 맞는 방식은 아님

[mooooburg-dev]

invoice는 pc브라우저(크롬, 사파리)에서만 지원하기로 하고 태블릿에서는 안내팝업을 띄우기로 함.
기본적으로 iOS detect 처리하기로 했으나 ipad에서 navigator.userAgent 가 macOS를 리턴하면서 문제 시작.
구글에서 나오는 다양한 detect 플러그인으로 테스트를 진행했으나 모두 실패.

https://qiita.com/mtdune/items/97abb9c0bd926d4c8a13
마지막에 이 내용으로 해결

// $ipad detect 처리
const ua = window.navigator.userAgent.toLowerCase();
Vue.prototype.$ipad = ua.indexOf("ipad") > -1 || (ua.indexOf("macintosh") > -1 && "ontouchend" in document);

이슈노트
https://www.evernote.com/l/ABpxhL210GtGQr_DH817Ec9csQv0tZzdTDU

[mooooburg-dev]

ipad에서 pdf를 표시할 수 없어 안내 팝업처리후 모달을 띄우지 않고 있었지만 모달을 띄우지 않고서는 PI발송 처리가 불가능하여 알럿 OK버튼 클릭후 모달 띄우기