vue3如何实现PDF文件在线预览功能

目录
  • 概述
  • 正文
    • 创建 vue3 项目
    • 添加 PDF 预览插件
  • 总结

概述

之前我们用 Reactjs + React-PDF 实现了 React 版的 PDF 文件预览,今天我们用 Vue3 + Vue-PDF 实现 Vue 版本的 PDF 文件在线预览功能。

我们先来看看完成后效果

正文

创建 vue3 项目

我们先创建一个的 Vue3 项目, 在终端中输入命令

pnpm create vite vue-pdf-preview

选择 vue-ts 回车,cd 进入项目根目录,执行 pnpm install, 等待项目依赖包安装完成。

项目依赖包安装完成后,我们来启动项目, 执行命令 pnpm run dev ,可以看到控制台输入出了如下内容

  vite v2.9.9 dev server running at:

  > Local: http://localhost:3000/
  > Network: use `--host` to expose

  ready in 780ms.

按住 control/command + 鼠标左键,项目在浏览器中打开了

项目启动成功

添加 PDF 预览插件

项目启动成功后,我们安装 PDF 预览插件

pnpm install vue-pdf-embed
pnpm install vue3-pdfjs

我们在 src 下新建一个文件 src/components/pdfPreview.vue,添加一些代码,初始化 vue-pdf 预览,代码如下

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

    </div>
</template>
<script setup lang="ts">
import { reactive, onMounted, computed } from "vue";
const props = defineProps({
    pdfUrl: {
        type: String,
        required: true
    }
})
onMounted(() => {
});

</script>
<style lang="css" scoped>
.pdf-preview {
    position: relative;
    height: 100vh;
    padding: 20px 0;
    box-sizing: border-box;
    background: rgb(66, 66, 66);
}

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

</style>

添加完成后,我们将 PDF 预览组件引入到 App.vue 文件中,并将提前准备的 PDF 文件也引入,如下所示

<template>
<div>
    <PDFView :pdfUrl="jsPdf" />
</div>
</template>
<script setup lang="ts">
import PDFView from "./components/pdfPreview.vue"
import jsPdf from "./Javascript.pdf"
</script>

接下来我们回到刚刚新建的 PDF 预览组件页面,来完善预览功能

我们先引入 PDF 预览插件

import VuePdfEmbed from "vue-pdf-embed";
import { createLoadingTask } from "vue3-pdfjs/esm"; // 获得总页数

使用 vue3reactive 定义一些页数,页码,PDF文件预览地址变量

const state = reactive({
    source: props.pdfUrl, 预览pdf文件地址
    pageNum: 1, 当前页面
    scale: 1, // 缩放比例
    numPages: 0, // 总页数
});

在 OnMounted 钩子函数中使用createLoadingTask 获取下 预览文件的总页数

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

在template中加入预览插件代码

 <div class="pdf-wrap">
     <vue-pdf-embed :source="state.source"  :style="scaleFun" class="vue-pdf-embed" :page="state.pageNum" />
</div>

打开浏览器,可以看到 PDF 文件已经加载出来了,但是样式不是很好看,我们下一步将样式优化下,并将 PDF 文件的翻页功能,缩放功能,当前页面/总页数展示功能添加完善

添加如下代码到 tempate

<div class="page-tool">
    <div class="page-tool-item" >上一页</div>
    <div class="page-tool-item">下一页</div>
    <div class="page-tool-item">{{state.pageNum}}/{{state.numPages}}</div>
    <div class="page-tool-item" >放大</div>
    <div class="page-tool-item">缩小</div>
</div>

美化样式

.pdf-preview {
    position: relative;
    height: 100vh;
    padding: 20px 0;
    box-sizing: border-box;
    background-color: e9e9e9;
}
.pdf-wrap{
    overflow-y:auto ;
}
.vue-pdf-embed {
    text-align: center;
    width: 515px;
    border: 1px solid #e5e5e5;
    margin: 0 auto;
    box-sizing: border-box;
}

.page-tool {
    position: absolute;
    bottom: 35px;
    padding-left: 15px;
    padding-right: 15px;
    display: flex;
    align-items: center;
    background: rgb(66, 66, 66);
    color: white;
    border-radius: 19px;
    z-index: 100;
    cursor: pointer;
    margin-left: 50%;
    transform: translateX(-50%);
}
.page-tool-item {
    padding: 8px 15px;
    padding-left: 10px;
    cursor: pointer;
}

添加文件的翻页功能,缩放功能,当前页面/总页数展示功能添加完善

const scale = computed(() => `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 < 2) {
        state.scale += 0.1;
    }
}
function pageZoomIn() {
    if (state.scale > 1) {
        state.scale -= 0.1;
    }
}

tempalte

<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>

到这里,vue3 PDF 文件预览功能我们已经做完了,

总结

到此这篇关于vue3如何实现PDF文件在线预览功能的文章就介绍到这了,更多相关vue3 PDF文件在线预览内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • vue使用Office Web实现线上文件预览

    目录 正文 什么是 Office Web 查看器? vue预览word,excel,pptx,pdf文件 正文 我们在浏览器阅读word,excel,pptx的offic文件,可以使用微软的开发接口,一个阅读器Office Web 什么是 Office Web 查看器? 它是一种创建 Office Web Viewer 链接的服务.Office Web Viewer 链接可在浏览器中打开 Word.PowerPoint 或 Excel 文件,否则这些文件将被下载.您可以轻松地将下载链接转换为 O

  • vue中如何实现pdf文件预览的方法

    今天产品提出一个优化的需求,就是之前我们做的图片展示就是一个img标签搞定,由于我们做的是海外后台管理系统,那边的人上传的文件时pdf格式,vue本事是不支持这种格式文件展示的,于是就google搜索,发现有iframe.embed.vueshowpdf(测试了不咋好用).pdf等,本文说一下pdf插件的使用过程. 说明:iframe标签这种,对于有的链接是可以的,比如这种链接在服务器端没有设置享有头content-disposition,就可以直接显示,如下: 想复制代码如下: <iframe

  • Vue3 + Vue-PDF 实现PDF 文件在线预览实战

    目录 概述 项目实战 创建 vue3 项目 添加 PDF 预览插件 概述 今天我们用 Vue3 + Vue-PDF 实现 Vue 版本的 PDF 文件在线预览功能. 我们先来看看完成后效果: 项目实战 创建 vue3 项目 我们先创建一个的 Vue3 项目, 在终端中输入命令 pnpm create vite vue-pdf-preview 选择 vue-ts 回车,cd 进入项目根目录,执行 pnpm install, 等待项目依赖包安装完成. 项目依赖包安装完成后,我们来启动项目, 执行命令

  • vue预览 pdf、word、xls、ppt、txt文件的实现方法

    目录 说下方法 1. 在页面内加个 iframe 2. word.xls.ppt这些文件 3. 最终效果 首先说下为什么要分享:网上教的都是特么的啥玩意!!!真特么垃圾,各种方法说不到点子上!!!真是特么气死我了!还有那群只会复制粘贴的帖子!自己都不做测试就会复制粘贴别人的,然后就发出来误人子弟,我真是醉了! 说下方法 1. 在页面内加个 iframe src地址即为要展示的文件地址 这里我用的是 elementui ,你们如果用其他的也是用iframe就得了 2. word.xls.ppt这些

  • vue项目中常见的三种文件类型在线预览实现(pdf/word/excel表格)

    目录 前言 一.预览word文件 1.安装 npm 依赖 2.预览在线地址文件 3.预览本地文件 二.预览excel表格 1.安装依赖 2.预览在线表格 三.pdf预览 1.安装依赖vue-pdf 2.在需要的页面注册 3.使用 4.加载本地pdf文件 5.解决pdf使用自定义字体预览和打印乱码问题:pdfjsWrapper.js 总结 前言 之前做PDF预览一直用的pdf.js,这次没有太多附加需求比较简单简,所以决定用vue-pdf这个组件,虽然说它没有原生那样强大,但已经满足常用的需求了,

  • vue3如何实现PDF文件在线预览功能

    目录 概述 正文 创建 vue3 项目 添加 PDF 预览插件 总结 概述 之前我们用 Reactjs + React-PDF 实现了 React 版的 PDF 文件预览,今天我们用 Vue3 + Vue-PDF 实现 Vue 版本的 PDF 文件在线预览功能. 我们先来看看完成后效果 正文 创建 vue3 项目 我们先创建一个的 Vue3 项目, 在终端中输入命令 pnpm create vite vue-pdf-preview 选择 vue-ts 回车,cd 进入项目根目录,执行 pnpm

  • Vue实现docx、pdf格式文件在线预览功能

    目录 介绍 docx 安装 使用 PDF 安装 引入和使用 pdf的放大和缩小 多格式的文件渲染函数映射 不支持的文件提示处理 总结 介绍 在业务中,如果遇到文档管理类的功能,会出现需要在线预览的业务需求,本文主要是通过第三方库来实现文档预览功能,并将其封装成preview组件 docx docx的实现需要使用docx-preview插件 安装 npm i docx-preview 使用 创建一个容器标签 <div ref="file" v-show="extend =

  • vue3中各种类型文件进行预览功能实例

    目录 前言 1.office文档类型的预览 2.pdf类型的预览 3. 图片类型 4.视频类型 5. 音频类型 总结 前言 摸着石头过河的滋味不好受啊,听说大厂的大佬们都在忙着用vue3在升级项目,我也没事凑一波热闹.身处某小厂还是不甘于折腾.新做一个项目,直接上vue3 ,头脑发热 ,可能有人不计后果,但是跌跌撞撞还是基本搞完了,那记录一下吧 今天说一下开发过程中的某一个功能吧!反正耗费不少时间,先说说功能需求吧:在上传文件之后的文件列表中能够点击进行预览,包含文件媒体类型包括 图片 .wor

  • SpringBoot实现文件在线预览功能的全过程

    目录 背景 系统设计 文件类型及方案 流程设计 系统实现 识别文件后缀 文件解析 系统效果 使用方法 项目源码地址 预览界面 总结 背景 最近公司内部oa系统升级,需要增加文件在线预览服务,最常见的文件就是office文档,一开始构思几个方案,比如office软件自带的文件转换,openoffice转换,offce365服务,aspose组件转换,最终采用了aspose转换,原因是组件功能完善,不依赖其它软件安装环境 系统设计 文件类型及方案 文件类型 预览方案 word aspsoe-word

  • 如何基于PHP实现微信小程序pdf文件的预览功能

    目录 知识点 问题描述 探索过程 实现思路 最终效果 实现步骤 总结 知识点 微信小程序预览pdf文件 这都是一些实际项目的开发经验,不是东拼西凑的网上水文.如果这篇文章帮到了你,麻烦动动你发财的小手给点个赞,留下个评论. 问题描述 前段时间文库类微信小程序开发中遇到个问题,就是要在小程序中预览阿里云OSS中的pdf文件.微信官方给的方案就一个,就是把文档缓存到本地然后用资源管理器打开. 这样写问题很明显,pdf文件小的话还可以,当pdf文件很大的时候,加载速度就会很慢.而且我只是需要预览单纯的

  • Java实现办公文档在线预览功能

    java实现办公文件在线预览功能是一个大家在工作中也许会遇到的需求,网上些公司专门提供这样的服务,不过需要收费 如果想要免费的,可以用openoffice,实现原理就是: 通过第三方工具openoffice,将word.excel.ppt.txt等文件转换为pdf文件流: 当然如果装了Adobe Reader XI,那把pdf直接拖到浏览器页面就可以直接打开预览,前提就是浏览器支持pdf文件浏览. 我这里介绍通过poi实现word.excel.ppt转pdf流,这样就可以在浏览器上实现预览了.

  • vue-pdf实现文件在线预览

    本文实例为大家分享了vue-pdf实现文件在线预览的具体代码,供大家参考,具体内容如下 提示:记录一下vue-pdf使用方法,避免忘记,便于后面使用 前言 提示:以下是本篇文章正文内容,下面案例可供参考 一.安装 npm install --save vue-pdf 二.pdf 页面显示 1.html <template> <div class="pdf-box"> //pdf展示 <pdf class="pdf" :page=&quo

  • java通过jacob实现office在线预览功能

    简介: 这篇文章中的代码都是参考于网上的,只做一个记录.主要做的就是实现一个office在线预览功能. 第一步:装office 第二步:下载jacob 打开网址下载,目前最新的是1.19版本. 第三步:配置jdk 解压下载完的jacob压缩包,根据jdk的版本选择dll中的一个,放入/jdk/jre/bin中. 第四步:在项目中引入jar包 在maven官网上找不到com.jacob的jar包,只能手动引入,这个jar包在jacob的压缩包中有. <dependency> <groupI

  • ASP.NET实现word文档在线预览功能代码

    于是考虑在每个文件上传时为其生存一份HTMl文件,这样就能实现在线预览功能.主要代码如下 复制代码 代码如下: using System; using System.Collections; using System.Configuration; using System.Data; using System.Web; using System.Web.Security; using System.Web.UI; using System.Web.UI.HtmlControls; using S

随机推荐