hrms-mgt/src/components/ViewPDF.vue

<script setup lang="ts">
import { ref, watch, computed, onUnmounted } from "vue";
import { useQuasar } from "quasar";
import { VuePDF, usePDF } from "@tato30/vue-pdf";
import axios from "axios";
import config from "@/app.config";

import { useCounterMixin } from "@/stores/mixin";

import DialogHeader from "@/components/DialogHeader.vue";

const $q = useQuasar();
const { messageError } = useCounterMixin();

const modal = defineModel<boolean>("modal", { required: true });
const title = defineModel<string>("title", { required: true });
const dataFile = defineModel<any | undefined>("dataFile", {
  required: false,
});

const pdfSrc = ref<any | undefined>();
const numOfPages = ref<number>(0);
const page = ref<number>(1);
const isLoadPDF = ref<boolean>(false);
const isLoading = ref<boolean>(false);
const currentObjectUrl = ref<string | null>(null);

// Computed properties for navigation
const canGoPrevious = computed(() => page.value > 1);
const canGoNext = computed(() => page.value < numOfPages.value);

/**
 * Navigate to previous page
 */
function goToPreviousPage() {
  if (canGoPrevious.value) {
    page.value--;
  }
}

/**
 * Navigate to next page
 */
function goToNextPage() {
  if (canGoNext.value) {
    page.value++;
  }
}

/**
 * Clean up object URL to prevent memory leaks
 */
function cleanupObjectUrl() {
  if (currentObjectUrl.value) {
    URL.revokeObjectURL(currentObjectUrl.value);
    currentObjectUrl.value = null;
  }
}

/**
 * Reset PDF state
 */
function resetPdfState() {
  cleanupObjectUrl();
  pdfSrc.value = undefined;
  page.value = 1;
  numOfPages.value = 0;
  isLoadPDF.value = false;
  isLoading.value = false;
}

/**
 * Load PDF file from URL
 * @param url - Link to load file
 * @param type - File type
 */
async function fetchPDF(dataFile: string): Promise<void> {
  try {
    isLoading.value = true;
    isLoadPDF.value = false;

    // Clean up previous object URL
    cleanupObjectUrl();

    console.log("fetchdata");

    const response = await axios.post(
      `${config.API.reportTemplate}/docx`,
      dataFile,
      {
        headers: {
          accept: "application/pdf",
          "content-Type": "application/json",
        },
        responseType: "arraybuffer",
      }
    );

    const blob = new Blob([response.data], { type: "application/pdf" });
    const objectUrl = URL.createObjectURL(blob);
    currentObjectUrl.value = objectUrl;

    const pdfData = usePDF(objectUrl);

    // Wait for PDF to be ready
    const checkPdfReady = () => {
      if (pdfData.pdf.value && pdfData.pages.value) {
        pdfSrc.value = pdfData.pdf.value;
        numOfPages.value = pdfData.pages.value;
        isLoadPDF.value = true;
        isLoading.value = false;
      } else {
        // Retry after a short delay
        setTimeout(checkPdfReady, 100);
      }
    };

    checkPdfReady();
  } catch (error) {
    isLoading.value = false;
    isLoadPDF.value = false;
    messageError($q, error);
  }
}

function onClose() {
  modal.value = false;
}

function onDownloadFile() {
  if (currentObjectUrl.value) {
    const link = document.createElement("a");
    link.href = currentObjectUrl.value;
    link.download = `${title.value}.pdf`;
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
  }
}

watch(modal, (val) => {
  if (val && dataFile.value) {
    fetchPDF(dataFile.value);
  } else {
    resetPdfState();
  }
});

// Cleanup on component unmount
onUnmounted(() => {
  cleanupObjectUrl();
});
</script>

<template>
  <q-dialog
    v-model="modal"
    persistent
    :maximized="true"
    transition-show="slide-up"
    transition-hide="slide-down"
  >
    <q-card class="column full-height bg-grey-2">
      <DialogHeader :tittle="title" :close="onClose" class="bg-white" />
      <q-separator />

      <div
        v-if="isLoadPDF"
        class="bg-white q-py-xs q-px-md row justify-center items-center q-gutter-sm shadow-1"
      >
        <q-btn
          flat
          round
          icon="mdi-chevron-left"
          :disable="!canGoPrevious"
          @click="goToPreviousPage"
          color="primary"
        />

        <q-chip
          outline
          color="primary"
          label-color="grey-9"
          class="q-px-lg text-weight-bold"
        >
          หน้า {{ page }} / {{ numOfPages || "-" }}
        </q-chip>

        <q-btn
          flat
          round
          icon="mdi-chevron-right"
          :disable="!canGoNext"
          @click="goToNextPage"
          color="primary"
        />
      </div>

      <q-card-section
        v-if="isLoadPDF"
        class="col scroll q-pa-md flex flex-center"
      >
        <div class="pdf-viewer-wrapper shadow-5">
          <VuePDF ref="vuePDFRef" :pdf="pdfSrc" :page="page" fit-parent />
        </div>
      </q-card-section>

      <q-card-section v-else class="col flex flex-center">
        <div class="text-center">
          <q-spinner color="primary" size="4em" :thickness="10" />
        </div>
      </q-card-section>

      <q-page-sticky position="bottom-right" :offset="[20, 20]">
        <q-btn
          fab
          size="xl"
          icon="mdi-download"
          color="primary"
          @click="onDownloadFile"
          :loading="!isLoadPDF"
        >
          <q-tooltip>ดาวน์โหลดไฟล์ PDF</q-tooltip>
        </q-btn>
      </q-page-sticky>
    </q-card>
  </q-dialog>
</template>

<style scoped>
/* สไตล์เพื่อให้ PDF ดูเหมือนวางบนโต๊ะ */
.pdf-viewer-wrapper {
  background-color: white;
  width: 100%;
  max-width: 900px; /* จำกัดความกว้างเพื่อความสวยงามบนจอใหญ่ */
  transition: all 0.3s ease;
}

/* ปรับแต่ง Scrollbar ให้ดูสะอาดตา */
.scroll::-webkit-scrollbar {
  width: 8px;
}
.scroll::-webkit-scrollbar-thumb {
  background: #bdbdbd;
  border-radius: 4px;
}
.scroll::-webkit-scrollbar-thumb:hover {
  background: #9e9e9e;
}
</style>