PDFViewer.vue 975 B

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152
  1. <script setup>
  2. import { ref, watch } from "vue";
  3. import { useMainStore } from "@/stores/store";
  4. const store = useMainStore();
  5. let pdfIframe = ref(null);
  6. let pdfUrl = ref(null);
  7. const props = defineProps({
  8. file: {
  9. type: String,
  10. },
  11. });
  12. watch(
  13. () => props.file,
  14. (name) => {
  15. setPDFUrl(name);
  16. }
  17. );
  18. function setPDFUrl(pdf) {
  19. console.log('pdf',pdf);
  20. // let url = `${store.imgUrl}/pdf/${name}.pdf`;
  21. let json = pdf.replace(/'/g, '"');
  22. let file = JSON.parse(json);
  23. let url = file.file1;
  24. // 更新 iframe 的 src
  25. if (pdfIframe.value) {
  26. pdfIframe.value.src = url;
  27. } else {
  28. pdfUrl.value = url;
  29. }
  30. }
  31. </script>
  32. <template>
  33. <div class="pt-16" v-if="!store.isMobile">
  34. <iframe
  35. ref="pdfIframe"
  36. src="https://craftsplatform.ntcri.gov.tw/pdf/Re_Ceramic.pdf"
  37. width="100%"
  38. height="700px"
  39. frameborder="0"
  40. border="0"
  41. cellspacing="0"
  42. ></iframe>
  43. </div>
  44. </template>
  45. <style lang="scss" scoped></style>