iframe-页面展示PDF

最新推荐文章于 2024-09-24 11:06:26 发布
最新推荐文章于 2024-09-24 11:06:26 发布
阅读量8k 收藏
点赞数 1
分类专栏： web 文章标签： pdf iframe
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sand_clock/article/details/77749270
版权

问题场景

手头的项目有这样一个需求，审核报告开发，左侧是PDF，右侧是审核的辅助信息。

解决方案

a 写一个总的iframe，分为两个小iframe；
b 利用itext生成所需要的报告并把绝对路径赋值到pdfTumor.jsp；
c 调用controller里的pdf方法把数据传输到页面展示。

效果

这里写图片描述

code

点击下载

sand_clock
关注
专栏目录
vue3使用ifame标签引用html页面,如何vue页面向html页面传递数据
st646889325的博客
07-01 409
vue3使用ifame标签引用html页面,如何vue页面向html页面传递数据一、实现需求二、实现步骤2.1 vue页2.2 html页。
浏览器内嵌显示pdf文档
loveuserzzz的专栏
07-20 7829
以前用的方法是第三方公司对adobe插件包装过的一个插件，但是今天看到网上有人说直接用pdf的插件，如下：   <param name="SRC" value="pdf路径"> 但是测试了根本不管用，不知道是什么原因，后来就找了另一种办法， 结果可以了，但是前提是得闲安装adobe的pdf阅读器. classid="clsid:CA8A9780-280D-
手机端PDF预览显示问题
最新发布
zwq1225的博客
09-24 445
在打开页数较多的PDF就会出现卡顿情况，因一开始的写法是在getDocument之后拿到PDF页数直接for循环将所有的page同时输出，那既然同时输出会引起卡顿，我们可以通过递归的方式将PDF一页页输出。我们将所有的canvas都缩小后，PDF显示的位置发生偏移，我们的transfrom-scale在进行变形时，css会默认将其放缩的基点放在整项的中间，就等于我们在设计时会说到的中心放缩。我们可以知道这是PDF本身的属性，因为我们传入的scale是1，所以我们应该得到的是“一倍图”
vue iframe展示pdf请求接口
女神的博客
01-29 1351
vue iframe展示pdf请求接口
vue3项目使用pdf.js插件实现：搜索高亮、修改pdf.js显示的页码、向pdf.js传值、控制搜索、处理接口文件流
热门推荐
wang13679201813的博客
04-14 2万+
官网下载地址：https://mozilla.github.io/pdf.js/getting_started/#download.1、使用pdfjs已经写好的viewer.html页面。下载后将pdf.js 放到服务器上 如：http://xxxx:8080/static/pdfjs。这种方法需要从官网上将pdf.js包下载下来。pdf.worker.js:负责核心解析。通过插件docx-preview实现。2、将PDF文件渲染成Canvas。pdf.js: 负责API解析，
js获取iframe框架中src所指向的文件的內容 .
字串8的专栏
03-10 3932
获取iframe框架中src所指向的文件的內容 function ini(){  alert(document.getElementById("frame_id").contentWindow.document.body.innerHTML) }
vue下canvas绘制矩形
weixin_30294709的博客
09-17 1604
起因：根据项目需求本人写了一个绘制矩形的组件。功能：在图片中绘制矩形，根据图片大小进行自适应展示，获取图片矩形坐标。思路：首先定义一个固定大小的DIV，DIV标签中有监测鼠标变化的四个事件mousedown，mousemove，mouseup，mouseleave。 第二在DIV标签内有img，canvas两个标签，一个负责图片展示,一个负责绘制矩形。 其中img与DIV标签的大小相当，...
iframe标签实现pdf预览功能
05-29
当用户访问这个页面时，浏览器会尝试在`iframe`中加载并显示PDF内容。 对于Vue和React这两个流行的JavaScript库，我们可以创建组件来封装`iframe`标签，以便在项目中更方便地使用。下面分别介绍这两种框架的实现...
把PDF文件展示在前端页面
09-05
在现代Web应用中，将PDF文件直接在前端页面展示给用户是一种常见的需求，尤其是在文档分享、在线阅读和教育领域。本篇文章将详细讲解如何利用给定的`touchpdf-master`压缩包来实现这一功能。 首先，`touchpdf-...
JS修改iframe页面背景颜色的方法
10-24
了解如何通过JavaScript修改iframe页面的背景颜色，不仅需要掌握JavaScript的基本语法和操作DOM的能力，还要了解iframe元素的特性和安全限制。 首先，iframe是HTML中的一个内联框架元素，它可以用来在当前的HTML...
h5项目直接展示Pdf
09-06
<iframe src="your-pdf-file.pdf" width="100%" height="600"></iframe> ``` 这种方法简单且兼容性好，但缺点是无法自定义样式和功能，如缩放、导航等。 2. **使用PDF.js库**： PDF.js是Mozilla开发的一个开源...
vue文件流转换成pdf预览(pdf.js+iframe)&&使用vue-pdf实现pdf预览
乐YB的博客
06-04 1878
需求：后端返回文件流前端将文件流转为成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嵌套页面
Marble Race
04-03 6045
iframe嵌套页面方法 <body style="margin:0px;"> <iframe src="" width="100%" height="100%" frameborder="0" ></iframe> </body> iframe常用属性: frameborder:是否显示边框，1(yes),0(no) height:框架作为...
pdf.js 请求传参关键词并高亮显示
winerww的博客
03-31 2877
pdf.js 请求传参关键词并高亮显示 1.去官网下载: http://mozilla.github.io/pdf.js/getting_started/#download 2.将下载的包static下 3.前端代码 对iframe 的src属性赋予pdf链接 file= :从后端获取pdf文件 4.获取本地pdf文件响应给浏览器 控制层/pdf/localPdf 调用该方法 4.修改view.js的初始化方法,往查询输入框赋值关键词,再实现点击高亮显示按钮 5.效果显示 ...
pdf在iframe页面中的使用
Lcc的博客
01-22 1727
实际项目中可能用到的操作有：放大两倍 隐藏工具栏 隐藏滚动条等配置。
jquery pdf文件 弹窗预览
m0_60370017的博客
10-28 486
iframe 弹窗预览pdf文件 let url = '预览的pdf路径' <div id="pdfView" style="position: fixed;top:0;left:0;width:100%;height:100%"> <div id="pdfContent"> <iframe src="'+ url +'" style="width: 100vw; height: 100vh"></iframe> <
pdf高亮显示
Hero_rong的博客
01-31 931
当时代码是这么写的，页面已经看到pdf了，但是PDFViewerApplication确实undefined，这样findBar方法也没法用，于是我疯狂百度，搜索原因，很不幸这5个原因里面没有我的原因，不得已，值得从头来，再啃一边pdf.js，终于给我找到了。现在前端pdf需求越来越多，比如发票的显示，文件的显示，怎么实现具体步骤百度一下吧，这里不做详细介绍，主要记录下遇到的问题。很开心，不仅可以高亮，还可以自动定位到高亮的位置。页面加载完成之后，再赋值。
使用iframe预览pdf；
i_am_a_div的博客
09-30 1万+
使用iframe预览pdf，iframe预览报错
怎么在前端html页面展示pdf但不下载
07-08
<iframe src="your-pdf-file.pdf" width="600" height="800"></iframe> ``` 这两个标签都会将 PDF 文件嵌入到页面中，并在网页上显示。用户可以直接在网页上查看 PDF 内容，而不需要下载文件。需要将 "your-pdf-...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值