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

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

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

寫在前面

很頭大 , 本來網(wǎng)絡實際地址的 pdf 文件直接放在 iframe 的 src 中就可以瀏覽 pdf 文件的 , 但是對于虛擬地址來說 , 這樣子只會讓網(wǎng)頁當場開始下載 pdf 文件到本地 , 而并不能在網(wǎng)頁上瀏覽

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

這里用的是 PDF.js 這個庫 , 最后有組件的代碼文件鏈接

開始

下載

首先我們需要下載來這個庫 , 原下載網(wǎng)址為

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

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

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

放入項目中

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

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

接下來我們寫一個組件來使用

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

制作組件

首先我們還是只需要一個 iframe 容器來展示 pdf 文件

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

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

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

那么這個 src 填什么呢 ?

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

直接看代碼 , 下面再解釋

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

我們來看 src 組成部分 , 一共有三部分組成