728x90
반응형
base64 첨부파일 새 탭 (새창)으로 미리보기 기능
<span @click="removeFile(file.id)">×</span>
previewFile(id){
var fileInfo = this.dataObj.fileIds.find(v=>v.id === id); //파일 배열
const fileExtension = fileInfo.fileName.split(".")[1].toLowerCase(); //확장자
//공통기능 호출
this.$previewFile(fileExtension, fileInfo.base64);
},
app.config.globalProperties.$previewFile = (fileExtension, b64Data) => {
const imageExtensions = ["png", "jpg", "jpeg", "gif", "bmp", "webp", "svg"];
if (!imageExtensions.includes(fileExtension) && fileExtension !== "pdf") {
alert("이미지 파일과 PDF 파일만 미리 보기 가능합니다.");
return;
}
const newWindow = window.open(); //새탭에서 열기
const newWindow = window.open('', '_blank', 'width=800,height=600'); //새창열기
if (imageExtensions.includes(fileExtension)) {
newWindow.document.write('<html><head><title>미리보기</title></head><body><img src="data:image/png;base64,' + b64Data + '"></body></html>');
} else if (fileExtension === "pdf") {
newWindow.document.write('<html><head><title>PDF 미리보기</title></head><body><embed src="data:application/pdf;base64,' + b64Data + '" type="application/pdf" width="100%" height="100%"></body></html>');
}
newWindow.document.close();
}
$previewFile와 같이 app.config.globalProperties은 전체에서 사용할 수 있는 속성을 설정할 수 있다
이는 Vue.js 2의 Vue.prototype과 유사한 기능을 제공하며 vue3부터 사용 가능
728x90
반응형
'공부의 > vuejs' 카테고리의 다른 글
| [vuejs] Dropzone vue3로 파일 드래그앱드롭 업로드 구현하기 (0) | 2023.04.17 |
|---|---|
| [vuejs] daterangepicker 새로고침 해야 나오는 현상, 페이지 이동시 작동 안됨 오류 (0) | 2023.03.22 |
| [vuejs] json 객체로 테이블 동적 생성하기(체크박스 모두 선택 제어) (0) | 2023.03.21 |
| [vue.js] tab 메뉴 class active 적용, 클릭 메뉴별 비동기 호출 (0) | 2023.02.21 |
| [vue.js] 네이버 지도 api 사용하기 (아직 도메인이 없을때) (0) | 2023.02.21 |
