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

watermelo37 2024-08-16 15:33:01 阅读 99

目录

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

一、前言

二、vue-pdf-embed是什么

1、作用与场景

2、vue-pdf-embed的优点

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

1、初始化Vue项目

2、安装依赖

3、集成vue-pdf-embed插件

四、一个实际的应用demo

五、总结


作者:watermelo37

涉及领域:Vue、SpingBoot、Docker、LLM、python等

-------------------------------------------------------------------------------------------------------------------------

--------------------------温柔地对待温柔的人,包容的三观就是最大的温柔。--------------------------

-------------------------------------------------------------------------------------------------------------------------

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

一、前言

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

        提醒:我还写了一篇在线预览pdf的组件博客,是用一个预定义的pdf阅览器,然后下载在线的pdf资源,将pdf渲染到pdf阅览器中,请移步:PDF预览:利用vue3-pdf-app实现前端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配置即可。

<code>vue create vue-pdf-demo

// 或者npm create vite

cd vue-pdf-demo

2、安装依赖

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

npm install vue-pdf-embed

3、集成vue-pdf-embed插件

        在src/main.js文件中引入vue-pdf-embed(也可以在组件中局部引入):

import { createApp } from 'vue';

import App from './App.vue';

import VuePdfEmbed from 'vue-pdf-embed';

const app = createApp(App);

app.component('vue-pdf-embed', VuePdfEmbed);

app.mount('#app');

        创建一个PDF展示组件PdfViewer.vue:

<template>

<div>

<vue-pdf-embed

:src="pdfSrc"code>

@load="onPdfLoad"code>

@page-change="onPageChange"code>

/>

</div>

</template>

<script>

export default {

data() {

return {

pdfSrc: '/path/to/your/pdf/file.pdf'

};

},

methods: {

onPdfLoad(pdf) {

console.log('PDF Loaded', pdf);

},

onPageChange(page) {

console.log('Page Changed', page);

}

}

};

</script>

<style scoped>

/* Add your styles here */

</style>

四、一个实际的应用demo

        将import pdfurl from "@/assets/altimate.pdf"换成你自己的本地pdf地址,然后在需要渲染的位置引入这个组件,设置好宽高,就可以成功渲染了。

<template>

<div class="pdf-preview">code>

<div class="pdf-wrap">code>

<vue-pdf-embed

:source="state.source"code>

:style="scaleFun"code>

class="vue-pdf-embed"code>

:page="state.pageNum"code>

/>

</div>

<div class="page-tool">code>

<div class="page-tool-item" @click="lastPage">上一页</div>code>

<div class="page-tool-item" @click="nextPage">下一页</div>code>

<div class="page-tool-item">{ -- -->{ state.pageNum }}/{ { state.numPages }}</div>code>

<div class="page-tool-item" @click="pageZoomOut">放 大</div>code>

<div class="page-tool-item" @click="pageZoomIn">缩 小</div>code>

</div>

</div>

</template>

<script lang="ts" setup>code>

import { reactive, onMounted, computed } from "vue";

import VuePdfEmbed from "vue-pdf-embed";

import { ElMessage } from "element-plus";

// import { createLoadingTask } from "vue3-pdfjs"; // 获得总页数

import pdfurl from "@/assets/altimate.pdf";

const state = reactive({

source: pdfurl, //预览pdf文件地址

pageNum: 1, //当前页面

scale: 1, // 缩放比例

numPages: 44, // 总页数

});

const scaleFun = computed(() => {

return {

width: "70vh", //按照pdf大约7:10的宽高比,对应80vh的高度,直接设置高度不生效

// height: "80vh",

transform: `scale(${state.scale})`,

};

});

function lastPage() {

if (state.pageNum > 1) {

state.pageNum -= 1;

}

}

function nextPage() {

if (state.pageNum < state.numPages) {

state.pageNum += 1;

}

}

function pageZoomOut() {

if (state.scale < 1) {

state.scale += 0.1;

} else {

ElMessage({

message: "已经放大到最大了",

type: "warning",

});

}

}

function pageZoomIn() {

if (state.scale > 0.6) {

state.scale -= 0.1;

} else {

ElMessage({

message: "已经缩放到最小了",

type: "warning",

});

}

}

onMounted(() => {

// const loadingTask = createLoadingTask(state.source);

// loadingTask.promise.then((pdf: { numPages: number }) => {

// state.numPages = pdf.numPages;

// });

});

</script>

<style lang="scss" scoped>code>

// 桌面端显示

// 桌面端显示

// 桌面端显示

.pdf-preview {

// position: relative;

// height: 100vh;

width: 50vw;

// padding: 0px 0;

// box-sizing: border-box;

// margin: 0 25%;

// background: rgb(66, 66, 66);

.pdf-wrap {

// border: 1px solid black;

display: flex;

justify-content: center;

// height: 100vh;

// overflow-y: auto;

.vue-pdf-embed {

// border: 1px solid black;

text-align: center;

// width: 50%;

// height: 60vh;

// margin: 0 10%;

box-sizing: border-box;

box-shadow: 0 5px 12px 0 rgba(0, 0, 0, 0.3);

// transform: scale(0.72);

}

}

.page-tool {

// position: absolute;

// bottom: 35px;

// padding-left: 15px;

// padding-right: 15px;

width: 25vw;

margin: 5px 25%;

display: flex;

justify-content: center;

display: flex;

align-items: center;

background: rgb(66, 66, 66);

color: white;

border-radius: 19px;

z-index: 100;

// cursor: pointer;

// margin-left: 25%;

// transform: translateX(-50%);

// border: white solid;

.page-tool-item {

padding: 8px 15px;

padding-left: 10px;

cursor: pointer;

}

}

}

@media (max-width: 1000px) {

.pdf-preview {

width: 95vw;

.pdf-wrap {

display: flex;

justify-content: center;

.vue-pdf-embed {

// text-align: center;

// box-sizing: border-box;

box-shadow: 0 5px 12px 0 rgba(0, 0, 0, 0.3);

}

}

.page-tool {

width: 40vw;

margin: 5px 30%;

display: flex;

justify-content: center;

display: flex;

align-items: center;

background: rgb(66, 66, 66);

color: white;

border-radius: 19px;

z-index: 100;

.page-tool-item {

padding: 8px 15px;

padding-left: 10px;

cursor: pointer;

}

}

}

}

</style>

五、总结

        本文详细介绍了如何在Vue项目中使用vue-pdf-embed实现PDF文件的在线展示。从项目初始化、插件集成到高级功能的实现和部署优化,希望对你有所帮助。在实际项目中,灵活运用这些技术可以大大提升用户体验和项目质量。

        只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~

        更多优质内容,请关注:

        分片上传技术全解析:原理、优势与应用(含简单实现源码)

        浏览器渲染揭秘:从加载到显示的全过程

        你真的会使用Vue3的onMounted钩子函数吗?Vue3中onMounted的用法详解

        通过array.filter()实现数组的数据筛选、数据清洗和链式调用

        el-table实现动态数据的实时排序,一篇文章讲清楚elementui的表格排序功能

        shpfile转GeoJSON且控制转化精度;如何获取GeoJSON?GeoJson结构详解

        通过array.reduce()实现数据汇总、条件筛选和映射、对象属性的扁平化、转换数据格式等

        极致的灵活度满足工程美学:用Vue Flow绘制一个完美流程图

        Mapbox添加行政区矢量图层、分级设色图层、自定义鼠标悬浮框、添加天地图底图等

        管理数据必备!侦听器watch用法详解



声明

本文内容仅代表作者观点,或转载于其他网站,本站不以此文作为商业用途
如有涉及侵权,请联系本站进行删除
转载本站原创文章,请注明来源及作者。