vue项目使用pdf.js插件实现pdf预览功能

最新推荐文章于 2024-08-22 12:02:21 发布
最新推荐文章于 2024-08-22 12:02:21 发布
阅读量1.4k 收藏 5
点赞数
分类专栏： vue项目实现pdf预览 文章标签： vue.js javascript 前端 vscode
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41207479/article/details/127031064
版权

一、pdf.js下载

1、官网地址：http://mozilla.github.io/pdf.js，下载稳定版
在这里插入图片描述
2、如果无法访问github下载zip文件，可通过下方链接进行下载
https://pan.baidu.com/s/1fAk8P1TRS8xXBFGR-am6fg 提取码: mz6b

二、创建vue项目

使用vue-cli创建一个简单的vue项目
在这里插入图片描述

三、vue项目引入pdf.js

将下载好的pdf.js压缩包解压缩后，复制到vue项目中
在这里插入图片描述
在这里插入图片描述

四、使用pdf.js

在这里插入图片描述通过调用pdf.js插件中的viewer.html实现在浏览器中pdf文件的预览

java小爬虫呀
关注
专栏目录
【Vue: 使用pdf.js顯示PDF Viewer】
一虹的博客
08-26 1477
Vue,移动端，Web端查看pdf借助的工具
vue使用pdf.js实现移动端在线PDF文件预览
yujin0213的博客
07-22 6502
pdfjs实现vue pdf预览
Vue3PDF预览（vue3-pdf-app）
热门推荐
Mr Dear的博客
04-20 2万+
适用于vue3的pdf预览组件，对vue3-pdf-app插件进行二次封装，功能丰富，简单易用😁😁
pdf.js viewer 实现预览pdf
最新发布
战族狼魂的博客
08-22 372
【代码】pdf.js viewer 实现预览pdf。
vue 使用pdf.js
hsany330的专栏
11-19 579
知识库模块，知识库新建功能中，文件内容支持富文本编辑和文件上传两种方式，其中文件上传支持word,excel,ppt,pdf几种格式。对应的知识库内容展示页面，根据上传的方式不同也有两种方式展示。 对于富文本的内容，直接在div标签中用v-html予以展示。 对于上传的文件，若为pdf文件，直接存储；若为office的三个类型文件，分成六种尾缀（'doc', 'docx', 'ppt', 'pptx', 'xls', 'xlsx'）在服务器通过openOffice转成pdf的格式存储。然后统一在ifra
vue中pdf预览组件_基于vue的pdf预览组件
weixin_30561959的博客
02-11 1086
vue-pdfjs-previewer基于vue的pdf预览组件本地起服务 npm run dev -- pdfPreviewer(该参数说明是表示运行examples下哪个例子)安装 npm install vue-pdfjs-previewer使用方法#第一步 注册该组件import Vue from 'vue'import PdfPreviewer from 'vue-pdfjs-previ...
vue项目中使用vue-pdf或pdf.Js，实现在页面上预览pdf内容
葫芦娃y的博客
03-25 2892
vue项目中使用vue-pdf或pdf.Js，实现在页面上预览pdf内容
vue插件开发之使用pdf.js实现手机端在线预览pdf文档的方法
12-07
这样，当用户访问这个Vue组件时，将会看到一个全屏的PDF预览界面，可以使用上一页和下一页按钮进行翻页。 需要注意的是，由于PDF.js默认不支持Web Workers，因此在手机等移动设备上可能会出现性能问题。为优化性能...
小程序预览PDF文件插件Pdf.js
11-20
本文将详细介绍如何使用"小程序预览PDF文件插件Pdf.js"，以及在Uniapp框架中实现PDF预览的步骤。 Pdf.js是由Mozilla开发的一款开源JavaScript库，它允许在Web浏览器中直接预览PDF文件，而无需依赖任何其他第三方...
vue实现在线预览pdf文件和下载（pdf.js）
10-15
在本文中，我们将详细探讨如何使用Vue.js实现在线预览PDF文件以及下载功能，这里采用的插件是pdf.js，一个广泛使用的开源PDF阅读器，由Mozilla基金会开发。 首先，了解pdf.js的基本概念非常重要。pdf.js能够将PDF...
Vue-pdf 实现文件预览功能
liu_yulong的专栏
05-12 925
参与github 文档 ​​​​​​GitHub - FranckFreiburger/vue-pdf: vue.js pdf viewer 完整示例代码 <template> <div class="app-container"> <el-col :span="1.5"> <el-button @click="handleBack" icon="el-icon-d-arrow-left" size="mini" type="pri.
Vue中使用pdf.js通过流的方式传参给pdfviewer.html
极飞的专栏
09-15 2015
vue通过postMessage传递pdf流给pdfviewer的实现。
vue项目pdf文件的预览
wulijuan888666的博客
11-10 1106
您可以在以下网址下载pdfjsLib：https://github.com/mozilla/pdf.js。pdfjsLib是一个开源项目，您可以在GitHub上找到其源代码和相关资源。5.在PdfViewer.vue组件中。4.获取pdf文件的信息并转换为链接。在index.html引入。
vue项目内集成pdfJs
A_one2010的博客
11-03 1848
先上官网链接 PDF.js 使用vue进行h5开发过程中，有时需要展示pdf，分享出来的页面，运行平台如果不支持pdf查看的话怎么办，pdfjs提供了很好的api，在这儿给大家提供两种方法以供参考。 效果分别如下： 第一种方法，缩放，跳转等等，都需自己额外调取及操作 第二种，则比较现成，样式也更接近浏览器自带的pdf预览。 两种实现方法如下 1 引入pdfjs-dist，调取pdfjs api 将需要查看...
vue使用pdf.js实现pdf文件的预览功能
故里的博客
12-20 1191
vue里怎么使用pdf.js实现pdf文件的预览功能
vue-pdf在vue框架中的使用
RumbleWx的博客
11-17 792
vue-pdf版本为4.3.0。
vue整合pdfjs，实现pdf文件预览
matinal 當冬夜漸暖 。公众号：matinal
01-07 1850
更多内容关注公众号：SAP Technical  背景 项目上要求实现pdf文件格式的预览。 分析 pdf格式的文件浏览器是可以直接打开的。所以只需要返回pdf文件的文件流，就可以直接预览文件，通过这种方式打开，整个页面全是pdf的文件内容。需求是要求预览时，页面上要加上特定的标题格式，所以直接把文件流在浏览器打开的方式行不通。通过收集相关资料，找到pdfjs插件以支持文件的预览。 ...
vue使用pdf.js
100%纯可可的博客
01-15 477
vue使用pdf.js 1.下载pdf.js 链接：http://mozilla.github.io/pdf.js/getting_started/#download 2. 解压后将文件放置项目public目录下 3. 项目中使用pdf.js的方法 注：此处用的iframe标签在页面内打开，可用a标签单独弹一个页面（根据项目需求而定）。 ...
vue2项目使用pdf.js 插件实现上一页 下一页功能
11-28
根据提供的引用内容，我们可以使用pdf.js插件来实现Vue2项目的PDF预览功能，并且可以实现上一页和下一页的功能。具体步骤如下： 1.首先，我们需要在Vue2项目中安装pdf.js插件。可以使用npm命令进行安装： ```shell npm install pdfjs-dist ``` 2.在Vue2项目中创建一个PDFViewer.vue组件，并在该组件中引入pdf.js插件： ```javascript import pdfjsLib from 'pdfjs-dist' ``` 3.在该组件中，我们需要定义一个pdf对象来存储PDF文件的相关信息： ```javascript data() { return { pdf: null, currentPage: 1, totalPages: 0 } } ``` 4.接下来，我们需要编写一个方法来加载PDF文件并显示第一页： ```javascript loadPDF() { pdfjsLib.getDocument(this.pdfUrl).promise.then(pdf => { this.pdf = pdf this.totalPages = pdf.numPages this.renderPage(this.currentPage) }) }, renderPage(pageNumber) { this.pdf.getPage(pageNumber).then(page => { const canvas = this.$refs.canvas const context = canvas.getContext('2d') const viewport = page.getViewport(1.5) canvas.height = viewport.height canvas.width = viewport.width page.render({ canvasContext: context, viewport: viewport }) }) } ``` 5.在模板中，我们需要添加一个canvas元素来显示PDF文件的内容，并添加两个按钮来实现上一页和下一页的功能： ```html <template> <div> <canvas ref="canvas"></canvas> <div> <button @click="prevPage">上一页</button> <button @click="nextPage">下一页</button> </div> </div> </template> ``` 6.最后，我们需要编写两个方法来实现上一页和下一页的功能： ```javascript prevPage() { if (this.currentPage > 1) { this.currentPage-- this.renderPage(this.currentPage) } }, nextPage() { if (this.currentPage < this.totalPages) { this.currentPage++ this.renderPage(this.currentPage) } } ``` 至此，我们就可以在Vue2项目中使用pdf.js插件来实现PDF预览并实现上一页和下一页的功能了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值