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>
原文地址：https://blog.csdn.net/m0_74825152/article/details/144694527
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！