如何使用vue-pdf-embed實現(xiàn)PDF在線預(yù)覽

更新時間：2025年03月13日 15:44:09 作者：st646889325

vue-pdf-embed是一個基于Vue.js的插件,專門用于在Vue應(yīng)用中嵌入和展示PDF文件,本文將使用vue-pdf-embed實現(xiàn)PDF在線預(yù)覽功能,有需要的小伙伴可以參考一下

一、前言

在本篇博客中介紹的vue-pdf-embed核心邏輯是獲取pdf內(nèi)容并將其每一頁渲染到canvas畫布上，以類似圖片的方式展示出來。pdf作為本地資源放在項目中。

二、vue-pdf-embed是什么

vue-pdf-embed是一個基于Vue.js的插件，專門用于在Vue應(yīng)用中嵌入和展示PDF文件。它利用PDF.js庫進行PDF文件的渲染，提供了簡單易用的接口，使開發(fā)者能夠快速在Vue項目中集成PDF展示功能。

1、作用與場景

vue-pdf-embed主要用于以下場景：

在線文檔管理系統(tǒng)：用戶可以直接在瀏覽器中查看、閱讀和管理PDF文檔。

在線書籍閱讀器：提供流暢的PDF書籍在線閱讀體驗。

報告展示系統(tǒng)：用于展示PDF格式的報告、分析文檔等。

電子簽名系統(tǒng)：允許用戶在線查看并簽署PDF文檔。

2、vue-pdf-embed的優(yōu)點

易于集成：提供了簡單的接口，方便快速集成到Vue項目中。

功能全面：支持多種PDF操作功能，如分頁、縮放等，滿足多樣化的需求。

高性能：通過分頁加載和緩存優(yōu)化，確保PDF文件的快速渲染和展示。

良好的文檔支持：提供詳細的文檔和示例，方便開發(fā)者上手使用。

使用 PDF.js 庫來直接在瀏覽器中渲染 PDF 文件的內(nèi)容。PDF.js 是一個通用的 PDF 閱讀器，它可以在網(wǎng)頁上顯示矢量 PDF 文件，而不需要任何插件。

使用 vue-pdf-embed 的好處還有它保持了 PDF 的原有質(zhì)量，并且可以利用 PDF.js 的強大功能，如文檔加密、表單填寫等。此外，由于它是基于 Canvas 的，它還支持響應(yīng)式設(shè)計，可以根據(jù)容器尺寸動態(tài)調(diào)整頁面的顯示大小。

三、項目初始化與依賴安裝

首先，我們需要初始化一個Vue項目，并安裝必要的依賴。

1、初始化Vue項目

使用Vue CLI來初始化一個新的Vue項目/使用vite來初始化一個新的Vue3項目，在創(chuàng)建過程中，選擇默認的Vue3配置即可。

vue create vue-pdf-demo
// 或者npm create vite
cd vue-pdf-demo

2、安裝依賴

接下來，安裝vue-pdf-embed插件：

npm install vue-pdf-embed

3、創(chuàng)建一個展示組件PdfViewer.vue

<template>
  <div class="page-tool">
    <div class="page-tool-item" @click="lastPage">上一頁</div>
    <div class="page-tool-item" @click="nextPage">下一頁</div>
    <div class="page-tool-item">{{ state.pageNum }}/{{ state.numPages }}</div>
    <div class="page-tool-item" @click="pageZoomOut">放大</div>
    <div class="page-tool-item" @click="pageZoomIn">縮小</div> 
  </div>
  <div class="pdf-preview">
    <div class="pdf-wrap">
      <vue-pdf-embed :source="state.source" :style="scale" class="vue-pdf-embed" :page="state.pageNum" />
    </div>
  </div>
</template>

<script setup>
import { reactive, onMounted, computed } from "vue";
import VuePdfEmbed from "vue-pdf-embed";
import { createLoadingTask } from "vue3-pdfjs";

const props = defineProps({
  pdfUrl: {
    type: String,
    required: true,
  },
});

const state = reactive({
  source: props.pdfUrl, //預(yù)覽pdf文件地址
  pageNum: 1, //當(dāng)前頁面
  scale: 1, // 縮放比例
  numPages: 0, // 總頁數(shù)
});

const scale = computed(() => `transform:scale(${state.scale})`);

onMounted(() => {
  const loadingTask = createLoadingTask(state.source);
  loadingTask.promise.then((pdf) => {
    state.numPages = pdf.numPages;
  });
});

function lastPage() {
  if (state.pageNum > 1) {
    state.pageNum -= 1;
  }
}

function nextPage() {
  if (state.pageNum < state.numPages) {
    state.pageNum += 1;
  }
}

function pageZoomOut() {
  if (state.scale < 2) {
    state.scale += 0.1;
  }
}

function pageZoomIn() {
  if (state.scale > 1) {
    state.scale -= 0.1;
  }
}

</script>

<style lang="less" scoped>
.pdf-preview {
  margin-top: 10px;
  padding:0;
  height: 100vh;
  box-sizing: border-box;
  background-color:  #fff;
}

.pdf-wrap {
  overflow-y: auto;
}

.vue-pdf-embed {
  text-align: center;
  width: 100%;
  border: 1px solid #e5e5e5;
  margin: 0 auto;
  box-sizing: border-box;
}

.page-tool {
  padding-left: 10px;
  padding-right: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgb(66, 66, 66);
  color: white;
  border-radius: 19px;
  margin-left: 10%;
  margin-right: 10%;
}

.page-tool-item {
  padding: 10px 0;
  padding-left: 10px;
  width: 33%;
  text-align: center;
}
</style>

4、使用

<template>
    <div>
        <PDFView  :pdfUrl="folderSource" />
    </div>
</template>

<script>
import { ref } from "vue";
export default {
   name: "pdf",
   setup() {
     const  folderSource = ref('/path/to/your/pdf/file.pdf');
    
     return{
        folderSource
   }
}
</script>

到此這篇關(guān)于如何使用vue-pdf-embed實現(xiàn)PDF在線預(yù)覽的文章就介紹到這了,更多相關(guān)vue-pdf-embed PDF在線預(yù)覽內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: