快捷導(dǎo)航

Vue使用PDF.js實(shí)現(xiàn)瀏覽pdf文件功能

更新時(shí)間：2023年04月20日 10:43:06 作者：不可名狀邵雅虎

這篇文章主要為大家詳細(xì)介紹了Vue如何使用PDF.js實(shí)現(xiàn)瀏覽pdf文件功能，文中的實(shí)現(xiàn)步驟講解詳細(xì)，具有一定的借鑒價(jià)值，需要的可以參考一下

寫在前面

很頭大 , 本來(lái)網(wǎng)絡(luò)實(shí)際地址的 pdf 文件直接放在 iframe 的 src 中就可以瀏覽 pdf 文件的 , 但是對(duì)于虛擬地址來(lái)說(shuō) , 這樣子只會(huì)讓網(wǎng)頁(yè)當(dāng)場(chǎng)開(kāi)始下載 pdf 文件到本地 , 而并不能在網(wǎng)頁(yè)上瀏覽

所以我趕緊網(wǎng)上搜羅搜羅 , 看看大家有什么好辦法 , 并且記錄下來(lái) .

這里用的是 PDF.js 這個(gè)庫(kù) , 最后有組件的代碼文件鏈接

開(kāi)始

下載

首先我們需要下載來(lái)這個(gè)庫(kù) , 原下載網(wǎng)址為

https://mozilla.github.io/pdf.js/getting_started/#download

我們直接下載最新的就好了

下載后的文件解壓后為這個(gè)結(jié)構(gòu)

放入項(xiàng)目中

我使用的是使用 vite 創(chuàng)建的 vue3 項(xiàng)目

在 public 文件夾中新建文件夾 libs / pdfjs , 將下載的文件移到 pdfjs 文件夾中

接下來(lái)我們寫一個(gè)組件來(lái)使用

在 components 文件夾中新建文件 , 我起名為 Pdf.vue 文件

制作組件

首先我們還是只需要一個(gè) iframe 容器來(lái)展示 pdf 文件

<template>
    <iframe :src="src" width="100%" :height="pdfH"></iframe>
</template>

寬高需要我們自己定好 , 一般寬度是直接占滿就可以了 , 你也可以根據(jù)需要調(diào)整

高度這一塊 , 由于我使用的布局是餓了么的 header-main 布局容器 , 所以我需要將頁(yè)面的高度減去我的 header 的高度

那么這個(gè) src 填什么呢 ?

我在網(wǎng)上看了一圈 , 說(shuō)實(shí)話看的挺迷糊的 , 有幾篇文章就好像進(jìn)入了謎語(yǔ)人的世界一般

直接看代碼 , 下面再解釋

<script setup lang='ts'>
	import { ref, nextTick, computed } from 'vue'
	const props = defineProps({
	    src: {
	        type: String,
	        required: true
	    }
	})
	let src = computed(() => {
	    return `/libs/pdfjs/web/viewer.html?file=${import.meta.env.VITE_APP_BASE_API}${props.src}`
	})
	let pdfH = ref(100)
	nextTick(() => {
	    pdfH.value = document.documentElement.clientHeight - 68
	})
</script>

我們來(lái)看 src 組成部分 , 一共有三部分組成

第一部分

是我們剛才將這個(gè) js 庫(kù)放置的位置 , 寫的就是一個(gè)從頁(yè)面中調(diào)用時(shí)的相對(duì)路徑

第二部分

第二部分是我們的接口請(qǐng)求地址 , 通常是我們用 proxy 代理過(guò)的地址 , 如果直接使用請(qǐng)求的地址會(huì)報(bào)跨域錯(cuò)誤 , 而我這里寫的是區(qū)分是否生產(chǎn)環(huán)境的 , 如果你沒(méi)有 , 請(qǐng)按以下方式添加