pdf预览，pdf.js+iframe

已于 2023-12-18 17:49:37 修改
阅读量739 收藏 10
点赞数 6
文章标签： javascript pdf 前端
于 2023-12-18 17:48:23 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44726587/article/details/135068209
版权

最近遇到了这个需求，本来做了一版但在手机不能预览，所以要改代码，试了用vue+pdf.js的，但是滚动加分页缩小、放大等功能，实现太麻烦了，就尝试了用iframe。可以正常实现预览效果如下

很简单，html，代码如下，

 <div class="lookpdf">
      <iframe width="100%" height="100%" :src="`/pdf/web/viewer.html?file=${url}`" frameborder="0"
        id="myIframe"></iframe>
    </div>

js代码就是获取文件流，代码就不放了，url就是文件流的地址，

pdf.js 下载地址，下载的文件要放在public下

PDF.jsA general-purpose, web standards-based platform for parsing and rendering PDFs.icon-default.png?t=N7T8https://mozilla.github.io/pdf.js/

好 想 。
关注
  • 6
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue文件流转换成pdf预览(pdf.js+iframe)&&使用vue-pdf实现pdf预览
乐YB的博客
06-04 1751
需求：后端返回文件流前端将文件流转为成blob地址预览pdf文件 两种方式： 1，PDFJS: https://mozilla.github.io/pdf.js/ 支持获取文件流到客户端，生成blob地址预览 2，Vue-pdf: https://github.com/FranckFreiburger/vue-pdf 会出现空白页( 推荐使用iframe方法 ) 一，官网(https://mozilla.github.io/pdf.js/getting_started/#download)下载PDFJS
使用iframe预览pdf
m0_49515138的博客
01-09 6782
iframe既可以用来预览本地static下的文档，也可以预览后端返回的文件流文档。iframe的介绍：将src的内容规定在 中显示出。预览自带分页、下载、旋转、比例等功能。
ViewerJS，PDF在线浏览插件。
12-16
很好的pdf浏览javascript插件。
内嵌 iframe 实现PDF预览
想好了再写！
07-04 3044
【代码】内嵌 iframe 实现PDF预览。
vue预览PDF文件的几种方法
最新发布
weixin_58495461的博客
05-13 1838
2.3 使用组件展示PDF文件。1.1页面结构 html。2.2 注册并引入组件。
文件流转换成PDF在iframe中显示，并调用打印
YY_WYG的博客
03-23 2167
先放个效果大图需求描述：这个word文档在后端存着，需要获取它的流，然后实现一个预览这个word的功能，然后下载、打印。预览的时候，本来要预览doc,但是查了一些up,都说doc显示的话文档格式有问题之类的bug,就决定转换成pdf,再预览了。。。
使用pdf.js展示pdf文件(亲测可用)
weixin_45816407的博客
05-11 6942
2、从后端获取blob形式的pdf文件，具体怎么获取和后端商定（思路，后端提供一个接口，参数为文件链接，前端带参文件链接请求接口后，接口返回此文件链接的blob形式的文件流。老版本和新版本同时引入，当请求页面是判断当前客户端类型，若是ios则使用老版本的pdf.js文件。此链接可下载最新版本，不兼容老版本浏览器和苹果系统，若需在苹果展示则使用最上面。找到/web/viewer.js，搜索 fileOrigin，并注释以下代码段。3、获取到blob形式的pdf文件后，添加到iframe中，完成。
使用 iframe 实现在线预览 .pdf 文件
Lyrelion的博客
12-27 6792
目录 场景再现 问题解决 场景再现 使用 Angular +Ionic5 创建包含 tabs 的页面，如何实现：切换 tab 时，保持当前 url 参数不变 问题解决 拦截 tab 点击事件（就是重新定义 tab 点击事件），通过 router 实现切换页面 tabs.page.html： <ion-tabs> <ion-tab-bar slot="bottom"> // (click)="goPage('committee')"：此处重新定义tab点..
使用iframe预览pdf；
热门推荐
i_am_a_div的博客
09-30 1万+
使用iframe预览pdf，iframe预览报错
前端如何预览pdf文件流
valsedefleurs的博客
05-23 8577
通过查找资料，可以找到如下几种方案，其中最为成熟的方案是vue-pdf1. iframe 既可以用来浏览本地static下的文档，也可以预览后端返回的文件流文档2. vue-pdf 较为完善的vue预览pdf的方案3. vueshowpdf 网络上找到的一个他人封装的pdf组件优点vue-pdf总结下来，简单在页面嵌套PDF样式没有定制化vueshowpdf权限控制，样式定制需求高vue-pdf。
iframe标签实现pdf预览功能
05-29
iframe标签实现pdf预览功能
viewerjs 在线显示pdf 兼容主流浏览器
12-05
1.将ViewerJS文件夹拷贝到你的项目中 2.配置地址                --%>               <iframe class="media" src ="Scripts/ViewerJS/#/wordHtml/<%=serviceH %>.PDF" style="width:100%;height:100%" ></iframe></div> wordHTml是放置pdf文件，他与Scripts文件是同等级的 这样就可以了 他是兼容ie的
pdf.js+pdfobject.js
10-30
当PDFObject.js检测到浏览器不支持内建的PDF预览时，可以调用PDF.js进行渲染。 3. **自定义界面**：根据需求，可以使用PDF.js的API自定义界面元素，如导航条、搜索框等。 总结，PDF.js和PDFObject.js是两种在网页中...
网页pdf预览控件，html+js+css pdf预览控件
12-25
总结起来，网页PDF预览控件利用HTML、JavaScript和CSS技术，结合`pdf.js`库，实现了在网页中无插件预览PDF文档的功能。开发者可以通过理解并应用这些技术，创建出高度自定义且用户体验良好的PDF预览界面。
js实现pdf在线预览问题.zip
01-04
3. iframe：通过加载PDF文件到iframe中，利用浏览器自带的PDF阅读器来预览PDF，这种方法简单但可能受限于浏览器兼容性。 二、PDF.js使用指南 1. 安装：通过npm安装PDF.js库，命令为`npm install pdfjs-dist`。 2. ...
pdf.js使用demo(已解决隐藏打印下载等按钮）
07-11
PDF.js 是一个由 Mozilla 维护的开源项目，它提供了在浏览器中查看 PDF 文档的能力，无需依赖任何第三方插件。这个项目的核心理念是利用 HTML5 技术，特别是 WebGL 和 Canvas，来渲染 PDF 文件，使得用户可以在现代...
js插件（pdf在线预览插件）.zip
01-24
3. **pdfobject.js** 和 **pdfobject.min.js**：这两个文件都是PDFObject库的不同版本，PDFObject是一个轻量级的JavaScript库，用于在HTML页面中插入PDF预览。它不依赖于任何框架，如jQuery，但可以与之兼容。...
vue项目不用vue-pdf还可以用iframe简单实现预览pdf
weixin_44738844的博客
05-06 1093
我的vue2项目安装了vue-pdf要报错，感觉是node版本的问题，我就找了其他的办法，使用iframe也可以简单时间pdf文件的预览，其中预览自带分页、下载、旋转、比例等功能，能够满足基本需求。重点：接口封装部分响应类型设置为blob，默认为get请求方法，但是写在js文件中axios.get又会报错。实现过程为，首先通过id从后端获取文件流，把它转成url，然后赋值到iframe的src上。at eval也是上面代码错误的原因，没有识别到响应类型是blob。index.vue文件js部分。
前端实现pdf文件预览
HelloWorldLJY的博客
01-11 1万+
1.后端返回的是pdf链接 //可以直接使用iframe进行显示 <template> <div> <iframe :src="url" type="application/x-google-chrome-pdf" width="100%" height="100%" /> </div> </template> export default { data() {
移动端实现pdf.js预览pdf
11-20
以下是移动端实现pdf.js预览pdf的步骤： 1. 首先，在你的HTML文件中引入pdf.js和pdf.worker.js文件，可以通过以下方式引入： ```html <script src="path/to/pdf.js"></script> <script src="path/to/pdf.worker.js"></script> ``` 2. 在HTML文件中添加一个iframe元素，用于显示pdf文件： ```html <iframe id="pdf-iframe" src="path/to/your/pdf/file.pdf"></iframe> ``` 3. 在JavaScript文件中编写代码，使用pdf.js加载pdf文件并在iframe中显示： ```javascript // 获取iframe元素 var iframe = document.getElementById('pdf-iframe'); // 获取iframe的window对象 var iframeWindow = iframe.contentWindow; // 使用pdf.js加载pdf文件 PDFJS.getDocument('path/to/your/pdf/file.pdf').then(function(pdf) { // 获取pdf的第一页 pdf.getPage(1).then(function(page) { // 获取canvas元素 var canvas = iframeWindow.document.createElement('canvas'); // 设置canvas的宽高 canvas.width = iframeWindow.innerWidth; canvas.height = iframeWindow.innerHeight; // 将canvas添加到iframe中 iframeWindow.document.body.appendChild(canvas); // 渲染pdf的第一页到canvas上 page.render({ canvasContext: canvas.getContext('2d'), viewport: page.getViewport(canvas.width / page.getViewport(1.0).width) }); }); }); ``` 4. 运行代码，即可在iframe中预览pdf文件。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值