PDF在线预览实现:如何使用vue-pdf-embed实现前端PDF在线阅读

一、前言

复制代码
    在本篇博客中介绍的vue-pdf-embed核心逻辑是获取pdf内容并将其每一页渲染到canvas画布上,以类似图片的方式展示出来。pdf作为本地资源放在项目中。

二、vue-pdf-embed是什么

复制代码
    vue-pdf-embed是一个基于Vue.js的插件,专门用于在Vue应用中嵌入和展示PDF文件。它利用PDF.js库进行PDF文件的渲染,提供了简单易用的接口,使开发者能够快速在Vue项目中集成PDF展示功能。

1、作用与场景

vue-pdf-embed主要用于以下场景:

在线文档管理系统 :用户可以直接在浏览器中查看、阅读和管理PDF文档。
在线书籍阅读器 :提供流畅的PDF书籍在线阅读体验。
报告展示系统 :用于展示PDF格式的报告、分析文档等。
电子签名系统:允许用户在线查看并签署PDF文档。

2、vue-pdf-embed的优点
易于集成 :提供了简单的接口,方便快速集成到Vue项目中。
功能全面 :支持多种PDF操作功能,如分页、缩放等,满足多样化的需求。
高性能 :通过分页加载和缓存优化,确保PDF文件的快速渲染和展示。
良好的文档支持:提供详细的文档和示例,方便开发者上手使用。

使用 PDF.js 库来直接在浏览器中渲染 PDF 文件的内容。PDF.js 是一个通用的 PDF 阅读器,它可以在网页上显示矢量 PDF 文件,而不需要任何插件。

使用 vue-pdf-embed 的好处还有它保持了 PDF 的原有质量,并且可以利用 PDF.js 的强大功能,如文档加密、表单填写等。此外,由于它是基于 Canvas 的,它还支持响应式设计,可以根据容器尺寸动态调整页面的显示大小。

三、项目初始化与依赖安装

首先,我们需要初始化一个Vue项目,并安装必要的依赖。

1、初始化Vue项目

使用Vue CLI来初始化一个新的Vue项目/使用vite来初始化一个新的Vue3项目,在创建过程中,选择默认的Vue3配置即可。

vue create vue-pdf-demo

// 或者npm create vite

cd vue-pdf-demo

2、安装依赖

接下来,安装vue-pdf-embed插件:

npm install vue-pdf-embed

3、创建一个展示组件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, //预览pdf文件地址
  pageNum: 1, //当前页面
  scale: 1, // 缩放比例
  numPages: 0, // 总页数
});

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>
相关推荐
清风ai明月1 分钟前
vue模板语法中使用冒号: 什么时候使用,什么时候不使用呢?
前端·javascript·vue.js
少卿2 分钟前
uniapp run使用指南 - VSCode 开发 Uni-app 项目
前端·vue.js
咪库咪库咪4 分钟前
css进阶:flex
前端
xcsweb4 分钟前
用AI理解前端文件类型
前端
剑亦未配妥5 分钟前
Vue2函数式组件实战:手写可调用的动态组件,适用于toast轻提示、tip提示、dialog弹窗等
前端·vue.js·vue
Enddme5 分钟前
带你了解面试常被问到的ES6+的核心新特性
前端·javascript
逆袭的小黄鸭7 分钟前
深入剖析 JavaScript 执行上下文:代码运行的幕后机制
前端·javascript·面试
小old弟7 分钟前
闭包:从入门到“顿悟”的奇幻之旅
前端
晴殇i8 分钟前
抛弃 JavaScript 立即执行函数,这个方案更简洁更优雅
前端·javascript
码是生活9 分钟前
鸿蒙开发排坑:解决 resourceManager.getRawFileContent() 获取文件内容为空问题
前端·harmonyos