    <template>
        <vue-pdf-app v-if="pdfurl == ''" theme="light" ></vue-pdf-app>
        <vue-pdf-app v-if="pdfurl != ''" :pdf="pdfurl" :config="config" theme="light" :page-number="1" @pages-rendered="pagesRendered" ></vue-pdf-app>
    </template>
  
  <script>
  import axios from "axios";


  // API
  import VuePdfApp from "vue3-pdf-app";
  export default {
    components: {
        VuePdfApp,
    },
    data() {
      return {
        fileId: null, // 파일아이디
        pdfurl : '',
        show : false,
        config: {
            sidebar: {
                viewThumbnail: true,
                viewOutline: true,
                viewAttachments: true,
            },
            secondaryToolbar: {
                secondaryPresentationMode: true,
                secondaryOpenFile: false,
                secondaryPrint: true,
                secondaryDownload: false,
                secondaryViewBookmark: true,
                firstPage: true,
                lastPage: true,
                pageRotateCw: true,
                pageRotateCcw: true,
                cursorSelectTool: true,
                cursorHandTool: true,
                scrollVertical: false,
                scrollHorizontal: false,
                scrollWrapped: false,
                spreadNone: true,
                spreadOdd: true,
                spreadEven: true,
                documentProperties: true,
            },
            toolbar: {
                toolbarViewerLeft: {
                    findbar: true,
                    previous: true,
                    next: true,
                    pageNumber: true,
                },
                toolbarViewerRight: {
                    presentationMode: true,
                    openFile: false,
                    print: true,
                    download: false,
                    viewBookmark: true,
                },
                    toolbarViewerMiddle: {
                    zoomOut: true,
                    zoomIn: true,
                    scaleSelectContainer: true,
                },
            },
            errorWrapper: true,
        },
      };
    },
    created() {
      this.fileId =  this.$store.state.pdfid;
      // decodeURIComponent(urlParams.get("fileId"));
      window.scrollTo({
      top: 0,
       // behavior: 'smooth' // 부드럽게 스크롤
      });
      this.openPdfViewr(this.fileId);
     
    },
    methods: {
         // PDF Viewr
        openPdfViewr :  async function (fileId) {          
            try {
                this.$setLoading(true);  
                const response = await axios({
                    url: '/file/fileDownload.json', // URL 경로 확인
                    method: 'post',
                    headers: {
                        'Content-Type': 'application/json; charset=UTF-8',
                        // Authorization: this.$store.state.authorization,
                    },
                    data: fileId,
                    responseType: 'blob',
                });              
                const url = window.URL.createObjectURL(new Blob([response.data]));
                this.pdfurl = url;  
                window.scrollTo({
                top: 0,
                // behavior: 'smooth' // 부드럽게 스크롤
                });
            } catch (error) {
                // alert('파일 다운로드 중 오류가 발생했습니다.');
            } finally {
                this.$setLoading(false);  
            }
        },

        pagesRendered : function(pdfApp){
            setTimeout(function(){                   
                pdfApp.page = 1
                pdfApp.scrollVertical = true;
                pdfApp.scrollHorizontal = true;
                pdfApp.scrollWrapped = true;
            }, 800);
          
        }
    },
  };
  </script>

<style>
@import "https://unpkg.com/vue-pdf-app@2.0.0/dist/icons/main.css";
</style>
  