快捷導(dǎo)航

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

更新時(shí)間：2024年05月09日 15:44:48 作者：小同學(xué)L

這篇文章主要介紹了vue3使用pdf.js來(lái)預(yù)覽文件的操作步驟(本地文件測(cè)試),文中通過(guò)代碼示例和圖文結(jié)合的方式給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下

1.下載pdf.js庫(kù)

下載地址

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

2. 放入項(xiàng)目中

在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的話 路徑上不需要寫(xiě)public
    // 如果是vue2的話 要寫(xiě)public ->  return `/public/lib/pdfjs/web/viewer.html?file=${props.src}`
    // 我這里是本地文件測(cè)試（props.src是本地文件，必須將這個(gè)文件放在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

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

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

注意：

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

5.跨域問(wèn)題

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

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

6.總結(jié)

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

您可能感興趣的文章: