欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue3使用pdf.js來預(yù)覽文件的操作步驟(本地文件測試)

 更新時間：2024年05月09日 15:44:48   作者：小同學(xué)L  
這篇文章主要介紹了vue3使用pdf.js來預(yù)覽文件的操作步驟(本地文件測試),文中通過代碼示例和圖文結(jié)合的方式給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下

1.下載pdf.js庫      

下載地址

下載后的文件解壓結(jié)構(gòu)是這樣的

2. 放入項目中

在vue3中public文件夾下新建 lib/pdfjs 文件 , 將解壓后的文件放入pdfjs文件夾下

3.新建PDF組件

在src/components新建PDF.vue組件

<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>

4.在HomeView.vue文件中使用PDF.vue

這里我使用了   打開新頁面預(yù)覽和彈窗預(yù)覽  兩種方式來預(yù)覽

<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>

注意：

本地文件測試 必須將pdf文件放在public/lib/pdfjs/web下面才行

5.跨域問題

如果出現(xiàn)跨域問題，將  viewer.js文件中的以下代碼注釋掉就可以了

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

6.總結(jié)

到此這篇關(guān)于vue3使用pdf.js來預(yù)覽文件的操作步驟(本地文件測試)的文章就介紹到這了,更多相關(guān)vue3 pdf.js預(yù)覽文件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評論