vue用pdf.js实现对pdf文件预览

最新推荐文章于 2024-07-30 11:27:41 发布

faye Fu

最新推荐文章于 2024-07-30 11:27:41 发布

阅读量421

点赞数 9

文章标签： javascript vue.js pdf

本文链接：https://blog.csdn.net/Jacy_Fu/article/details/136398434

版权

本文介绍了如何在Vue项目中下载并集成PDF.js库，实现在页面上嵌入iframe展示PDF文件，包括从后端获取URL或使用OSS服务的bloburl。

摘要由CSDN通过智能技术生成

记录工作实践

首先下载pdf.js，链接如下：

PDF.js

下载好的包解压后，将build和web文件夹复制到vue项目的public里建好的pdfJS文件夹里面；

在需要使用的页面➕以下代码：

<iframe :id="iframeId" :key="Math.random()" width="100%" height="100%"
            :src="`/pdfJS/web/viewer.html?file=${encodeURIComponent(path)}`" frameborder="0" ref="pdfframe"></iframe>

将后端返回的url或者oss文件流转blob url代替上面的path

显示效果如下：

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

faye Fu

关注关注

9
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue用pdf.js实现对pdf文件预览

下载好的包解压后，将build和web文件夹复制到vue项目的public里建好的pdfJS文件夹里面；将后端返回的url或者oss文件流转blob url代替上面的path。
复制链接

扫一扫

vue使用pdf.js实现移动端在线PDF文件预览

yujin0213的博客

07-22

6428

pdfjs实现vue pdf预览

pdf.js预览pdf文件

伤心的桔子嘎的自习室

11-23

9114

项目中需要做一个office在线预览的功能，所以用到了pdf.js 下载对应官方文件，然后预览嗯，这样就可以了期间遇到一个比较坑的问题，就是Chrome下面死活出不来，报错如下： Unexpected server response (204) while retrieving PDF 网上有人说是什么跨域问题，如开源中

参与评论您还未登录，请先登录后发表或查看评论

使用pdf.js在Vue、React中预览Pdf文件,支持PC端、移动端

最新发布

weixin_51326478的博客

07-30

1018

文章浏览阅读521次。之前一直使用的pdf.js+canvas的形式预览PDF，但是这有一个很大的弊端，就是canvas生成的图片太糊了，而且本质上这渲染的根本不是pdf，而是一张图片，很多pdf中带有的功能这里都不能实现。我在源码中加了一个被我隐藏的按钮，并为其添加点击事件，在缩放完成后，调用点击事件，完成pdf的更新。文章浏览阅读7.6k次。【Vue】vue2使用pdfjs预览pdf文件，在线预览方式一，pdfjs文件包打开新窗口预览pdf文件_vue2 pdfjs-CSDN博客。

vue项目中使用vue-pdf或pdf.Js，实现在页面上预览pdf内容

葫芦娃y的博客

03-25

2622

vue项目中使用vue-pdf或pdf.Js，实现在页面上预览pdf内容

【PDF.js】PDF文件预览

HJay_Chou的博客

04-10

3388

使用PDFJS实现pdf文件的预览，支持预览指定页、关键词搜索、缩略图、页面尺寸调整等等。

js预览pdf文件

09-18

通过pdfobject.js预览PDF，亲测。需要安装Adobe的。

vue 使用pdfjs预览pdf文件

Cynthia_Yue27的博客

11-23

720

pdf.js官网将官网下载后的代码放在static或public文件下，大概结构如下，我的文件夹名叫pdf，里边有两部分，一部分build，一部分web 我们要写的核心代码只有这一行，通过点击a标签跳转到viewer.html这个页面，而这个页面就在web文件夹下，后边拼接的是pdf的路径 <a :href="`${publicPath}/pdf/web/viewer.html?file=${encodeURIComponent(pdfUrl)}`">查看</a> 分两种情况：

vue插件开发之使用pdf.js实现手机端在线预览pdf文档的方法

12-07

本文将详细介绍如何使用pdf.js插件来实现在Vue中手机预览PDF文档。首先，pdf.js是一个由Mozilla维护的开源库，它允许在浏览器中渲染PDF文件，而无需依赖任何第三方插件。你可以从GitHub上克隆pdf.js项目，然后使用...

vue实现在线预览pdf文件和下载（pdf.js）

10-15

在本文中，我们将详细探讨如何使用Vue.js实现在线预览PDF文件以及下载功能，这里采用的插件是pdf.js，一个广泛使用的开源PDF阅读器，由Mozilla基金会开发。首先，了解pdf.js的基本概念非常重要。pdf.js能够将PDF...

vue版pdf.js 在线预览pdf文件流

z793397795的博客

04-30

3494

vue版pdf.js在线预览pdf文件流，包含前、后端逻辑。

pdf.js在线预览pdf

09-18

一款来自火狐的开源在线预览pdf的工具，已经经过验证，支持IE浏览器、火狐浏览器、谷歌浏览器等。

vue使用pdf.js实现pdf文件的预览功能

故里的博客

12-20

1176

vue里怎么使用pdf.js实现pdf文件的预览功能

pdf.js在线预览PDF文件实现

weixin_44488927的博客

07-06

3252

pdf.js是一款功能比较强大的在线预览PDF插件，自带“打印”,“搜索”,“翻页”等功能,强大且实现方便，并且兼容性比较好（兼容ie10及以上、谷歌、安卓，苹果）。首先要下载PDF.js，官网地址：http://mozilla.github.io/pdf.js/。选择prebuilt下载最新版本下载下来的PDF.JS需要构建后才能使用，大家可以去网上找找已经构建完成的pdf.js包来用。链接：https://pan.baidu.com/s/13i-CQxBrONytaZJaQk6v3w...

Vue中使用pdf.js实现在线预览pdf文件流

qq_45585640的博客

09-07

8400

方法加载pdf文件流。可以将文件流作为Blob对象传递给该方法。此时，pdf文件已经被渲染成了一张图片。以上就是在Vue中使用pdf.js实现在线预览pdf文件流的详细步骤。使用pdf.js的Renderer渲染pdf文件。此时，pdf文件已经加载到了pdf对象中。方法获取pdf页面的视图大小。

pdf.js实现预览功能

热门推荐

m0_46270721的博客

12-01

1万+

pdf.js实现预览文档 + element-image预览图片

Vue使用pdfjs-dist预览PDF

buzhidjiaosha的博客

08-17

2489

vue项目使用pdf-dist实现预览pdf，vue2预览pdf

前端使用pdf.js进行pdf文件预览的第二种方式：Viewer.html

qq_29517595的博客

02-05

7879

前端使用pdf.js进行pdf文件预览的第二种方式：Viewer.html

vue里怎么使用pdf.js实现pdf文件的预览功能

学习前端这门手艺，栈底到栈顶依次是：浏览器架构、Web 网络、事件循环机制、JavaScript 核心、V8 的内存管理、浏览器的渲染流程、Web 安全、CSS、React、Vue、Node、构建工具链等

09-10

1万+

你首先得准备一个pdf插件包，比如我这边的项目包里的public文件夹的lib文件夹下面就有一个pdf的插件包，里面包含build以及web两个文件夹。行，从而确定链接的参数file参数就是我们需要的pdf文件路径参数。其实实现这个预览代码量很少，核心代码就一行，接下来我介绍一下这个实现过程。比如我这边的写法就是下面的样子，这个就是预览的核心代码。我们打开viewer.js，有个默认的配置项。下载一个稳定版本的就行，目录大致如下。，直接访问浏览器就会下载该pdf。...

springboot+vue使用pdf.js实现保存在sftp 上的 pdf在线预览

05-24

要实现保存在SFTP上的PDF在线预览，可以使用PDF.js库，它是一个开源的JavaScript库，可用于在Web浏览器中显示PDF文件。同时，还需要使用Spring Boot和Vue.js框架来搭建前后端项目。以下是大致的实现步骤： 1. 在Spring Boot中配置连接到SFTP服务器的信息，可以使用JSch库实现SFTP连接。可以参考这篇文章：https://www.baeldung.com/java-ftp-client-sftp。 2. 编写一个API接口，将SFTP服务器上的PDF文件流读取并返回给前端，可以使用IOUtils类对文件流进行读取和转换。 3. 在Vue.js中使用PDF.js库来渲染PDF文件。可以使用vue-pdf插件来实现，具体可参考这篇文章：https://www.jianshu.com/p/576e3e6bcbbe。 4. 前端调用后端API接口获取PDF文件流，并将其传递给vue-pdf插件进行渲染。 5. 在前端页面中添加上传PDF和保存PDF的功能，可以使用element-ui组件来实现。以上是大致的实现步骤，具体实现过程中可能会有一些细节和问题需要解决。