ntcri/src/components/PDFViewer.vue

<script setup>
import { ref, watch } from "vue";
import { useMainStore } from "@/stores/store";

const store = useMainStore();
let pdfIframe = ref(null);
let pdfUrl = ref(null);

const props = defineProps({
  file: {
    type: String,
  },
});

watch(
  () => props.file,
  (name) => {
    setPDFUrl(name);
  }
);

function setPDFUrl(pdf) {
  console.log('pdf',pdf);
  // let url = `${store.imgUrl}/pdf/${name}.pdf`;
  let json = pdf.replace(/'/g, '"');
  let file = JSON.parse(json);
  let url = file.file1;

  // 更新 iframe 的 src
  if (pdfIframe.value) {
    pdfIframe.value.src = url;
  } else {
    pdfUrl.value = url;
  }
}
</script>

<template>
  <div class="pt-16" v-if="!store.isMobile">
    <iframe
      ref="pdfIframe"
      src="https://craftsplatform.ntcri.gov.tw/pdf/Re_Ceramic.pdf"
      width="100%"
      height="700px"
      frameborder="0"
      border="0"
      cellspacing="0"
    ></iframe>
  </div>
</template>

<style lang="scss" scoped></style>