使用pdf.js插件同时用iframe嵌套方式预览pdf文件

最新推荐文章于 2025-04-08 17:11:52 发布
最新推荐文章于 2025-04-08 17:11:52 发布
阅读量2.2k 收藏 6
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_43729779/article/details/115017214
版权
本文介绍了如何在Vue项目中利用pdf.js插件，通过iframe嵌套的方式预览PDF文件。首先从百度搜索pdf.js并下载相关包，将其放入Vue项目的public/PDF目录下。接着在预览页面中引用资源，结合BASE_URL配置进行路径设置。通过代码截图展示具体实现过程，若需调整样式，可直接查找并修改相关元素。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

1.在百度搜pdf.js
在这里插入图片描述
在这里插入图片描述
2.把下载好的包放在项目中，我这里是Vue项目，在public文件夹下，新建一个PDF文件夹，把下载的包里的build 和web 文件夹 放到PDF文件夹里
在这里插入图片描述
3.预览页面中

<template>
	<div>
		<iframe :src
最低0.47元/天 解锁文章
时光回溯
关注
java用pdf.js在线预览pdf文件(jeecg框架)
u010244957的博客
06-28 1351
本地没有问题，能正常预览pdf，但线上服务器不可以，报如下这个错，.mjs文件的不被识别为Content-Type:application/javascript;最近在jeecg框架的后台要做一个pdf在线预览的页面功能，可是每次点预览都是下载，所以就要解决这个问题，现在解决了，记录一下，防止后面踩坑。在这里，大家一般都直接点下载，那就是最新版本，这个插件最新版本里包含.mjs文件，如下图所示。所以果断放弃pdf.js的最新版，下载了包含.js的旧pdf.js，解决了问题。打包的代码，都在这里了。
vue项目中使用pdf.js预览pdf文件
热门推荐
shentibeitaokong的博客
05-02 19万+
项目要求需要预览pdf文件，网上找了很久，大多数都是推荐pdf.js，自己先了解了一下，最后决定用pdf.js， 但是发现，在vue中使用这个很少！！！！！所以我就写这一篇帮助一下vue使用pdfjs的朋友！ 其实 这和前端框架无关的，直接使用pdf.js原生 搜多了你就发现有几个封装pdf.js的vue组件，个人试验了其中一个，效果不是很好，所以，当然啊，用原生 的是最...
iframe打开pdf设置标题
weixin_41804506的博客
09-14 2557
iframe打开pdf设置标题
pdfobject.js
11-13
前端上传并查看查看pdf的第三方插件pdfobject.js。用于用户使用web工具浏览pdf.
pdf.js用iframe方式时不能全屏的处理方法
最新发布
最爱松露巧克力
04-08 107
在pdf下的web下viewer.js文件中找到以上的的代码替换成下面的代码。
pdf.js使用和JS实现嵌套Iframe页面F11全屏效果
笑乐天
01-20 1万+
1      Pdf.js使用 generic/web/viewer.html主要是渲染pdf阅读器的样式，而generic/web/viewer.js则是指定打开的pdf文件（当然还有其他功能，不过这些都不是我们关心的），我们看位于generic/web/viewer.js的一段代码： var DEFAULT_URL ='20802.pdf'; 我们可以看到，他默认打开generic/we
前端预览PDF总结：iframe、embed、PDFObject、PDF.js
ruanhongbiao的专栏
05-09 8万+
要在网页上显示PDF文件,首先< object >、< embed >、< iframe >这几个标签就能实现PDF文件的预览（无需JavaScript支持），我还在网上看了下发现挺多第三方js库可以实现PDF预览，如jQuery Document Viewer、jquery.media.js、PDFObject、PDF.js等等。我大概看了下PDFObject...
pdf.js结合iframe实现文件（word，pdf）预览，且可通过手势缩放
weixin_39150852的博客
11-11 8018
1.下载pdf.js ，存放在public文件中 地址https://download.csdn.net/download/weixin_39150852/13105274 2.获取需预览的文件信息，存在sessionStorage 组件中使用iframe预览文件 <template> <div class="main-page-container"> <div>文件名： {{pdfName}}</div> <div class=
【iframe结合pdf.js实现pdf的预览/下载及打印功能】
AmyGeng123的博客
08-31 5735
iframe结合pdf.js实现pdf的预览/下载及打印
Vue3 使用pdf.js 预览pdf
m0_67401851的博客
03-06 2826
Vue3 使用pdf.js 预览pdf 非专业 如有语术错误请谅解 写在前面：vue-pdf 好像并不支持Vue3 参考https://segmentfault.com/a/1190000039858927 本样例是基于后端返回的是文件流 直接上样例 首先下载pdf.js 注意：将解压后的文件放在static下 1.使用ifame嵌套 <iframe id='pdf' ref='pdf' height='100%' :src='pdfUrl'
iframe预览文件
qq_53353413的博客
02-17 4108
iframe
【vue2中的pdf预览】iframe/pdf.js/vue-pdf
记录
09-05 3980
vue2中预览pdf的方法有pdf.js和vue-pdf等。进行简单对比&使用方法的介绍。
pdf预览，pdf.js+iframe
qq_44726587的博客
12-18 1471
简单实现全面的pdf预览，使用多端，
PDF.js在前后端＜iframe＞标签中在线预览PDF文件的使用心得
lwl827的博客
03-25 2890
前端时间项目中需要在前后端预览PDF文件（后端使用jsp，前端H5），因为页面中还包含点赞，分享等功能，所以考虑用<iframe>标签来打开PDF文件进行预览，之前没有做过所以花了点时间研究了一下， 现在记录一下，希望能够帮到有需要的朋友。（PDF.js可以在网上搜索自行下载，具体怎样使用PDF.js请自行搜索，这里不多讲） 1、后台jsp的使用 项目中的PDF文件是上传到百度云的所以在上传和下载的时候依赖的这个包，上传后将路径保存在content字段中。 后台读...
ifream src 绑定中文PDF时，出现404找不到
梦幻通灵
03-28 830
最近用ifream在页面加载pdf文件时，文件名称是中文时，出现404的错误， var roserForm = Ext.create('Ext.container.Container',{ height : 370, id : 'roserFromID', html : '<iframe id="roserForm" name="roserForm" src="" styl...
在VUE项目中使用pdf.js+iframe实现pdf文件预览
K1nney的博客
07-12 1910
*
使用 pdf.js 在网页中加载 pdf 文件
极客神殿
07-09 5859
在网页中加载并显示PDF文件是最常见的业务需求。例如以下应用场景：（1）在电商网站上购物之后，下载电子发票之前先预览发票。（2）电子政务管理系统中查看发布的公文，公文文件一般是PDF格式的文件。 目前随着浏览器技术发展的不断成熟与强大，大部分的浏览器都支持直接把PDF文件拖到浏览器中显示，最方便的是这个操作不需要额外的插件支持。但是不同的浏览器加载显示PDF的效果不同。这时就需要专门的JS插件来处理。Mozilla开源了一个插件pdf.js，无需任何本地支持就可以在所有主流的浏览器上显示PDF文档，使用起来
vue中使用pdfjs在iframe标签中表示
weixin_47372236的博客
10-12 419
pdf.js下载pdf.js 解压后这三个文件拷贝到public文件夹下面。 <iframe :src="file.pdfUrl" height="800px;" width="800px"></iframe> const host: any = window.location.host; this.$set(this.file, 'pdfUrl', `/web/viewer.html?file=${encodeURIComponent('http://localhost:
使用 iframe 实现在线预览 .pdf 文件
Lyrelion的博客
12-27 7201
目录 场景再现 问题解决 场景再现 使用 Angular +Ionic5 创建包含 tabs 的页面，如何实现：切换 tab 时，保持当前 url 参数不变 问题解决 拦截 tab 点击事件（就是重新定义 tab 点击事件），通过 router 实现切换页面 tabs.page.html： <ion-tabs> <ion-tab-bar slot="bottom"> // (click)="goPage('committee')"：此处重新定义tab点..
iframe嵌套预览pdf去掉黑色背景
02-19
为了在 `iframe` 中嵌套预览 PDF 时去除黑色背景，可以采用以下方法： 通过设置 `iframe` 的属性来确保 PDF 文档能够完全填充容器并覆盖默认的灰色或黑色背景。具体实现方式如下所示[^2]。 ```html <iframe :src=...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值