<template>
    <iframe :src="src" width="100%" :web.xmlheight="pdfH" style="width: 100%; height: 90%"></iframe>
</template>
<script setup lang='ts'>
import { ref, nextTick, computed, onMounted } from 'vue'
const props = defineProps({
    src: {
        type: String,
        required: true
    }
})
 
let src = computed(() => {
    // vue3的話 路徑上不需要寫public
    // 如果是vue2的話 要寫public ->  return `/public/lib/pdfjs/web/viewer.html?file=${props.src}`
    // 我這里是本地文件測試（props.src是本地文件，必須將這個文件放在public/lib/pdfjs/web下面才行）
    return `/lib/pdfjs/web/viewer.html?file=${props.src}`
})
let pdfH = ref(100)
nextTick(() => {
    pdfH.value = document.documentElement.clientHeight - 68
})
onMounted(() => {
})
</script>

<script setup lang="ts">
import { ref } from 'vue';
import PDF from '@/components/PDF.vue'
let dySrc = ref('')
const dialogVisible = ref(false)
//? 打開新頁面預(yù)覽
const showPDF = async () => {
    dySrc.value = '/lib/pdfjs/web/測試.pdf'
    //替換為實際的文檔URL
    const pdfUrl = `lib/pdfjs/web/viewer.html?file=${dySrc.value}`;
    //pdfUrl是當(dāng)前頁面的pdf文件的URL,第二個參數(shù)'_blank'表示在新窗口中打開。
    window.open(pdfUrl, '_blank');
}
//?在彈框中顯示
const showDialogPDF = () => {
    dialogVisible.value = true
    dySrc.value = '/lib/pdfjs/web/測試.pdf'
}
</script>
<template>
    <div>
        文件名(新頁面打開預(yù)覽)：
        <span @click="showPDF" style="color:rgb(0,174,236);cursor: pointer;">xxx.pdf</span>
    </div>
    <div>
        文件名(彈窗打開預(yù)覽)：
        <span @click="showDialogPDF" style="color:rgb(0,174,236);cursor: pointer;">xxx.pdf</span>
    </div>
    <el-dialog v-model="dialogVisible" title="預(yù)覽pdf">
        <p-d-f :src="dySrc"></p-d-f>
    </el-dialog>
</template>
<style>
.el-dialog {
    width: 1000px;
    height: 800px;
}
 
.el-dialog__body {
    height: 100%;
}
</style>

    // if (fileOrigin !== viewerOrigin) {
      //   throw new Error("file origin does not match viewer's");
      // }