一、前言
在本篇博客中介绍的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>