前端iframe内嵌PDF展示方案

最新推荐文章于 2025-07-09 14:52:54 发布

weixin_33978044

最新推荐文章于 2025-07-09 14:52:54 发布

阅读量6.3k

点赞数 1

CC 4.0 BY-SA版权

文章标签：前端 javascript 后端 ViewUI

原文链接：https://juejin.im/post/5c8b2b8b5188257e9044efa1

本文介绍了一种利用HTML iframe标签实现前端展示PDF的解决方案。在业务场景中，当需要用户直接在页面上阅读PDF时，可以通过设置iframe的src属性指向后端返回的PDF流URL。后端采用Node.js的Express框架，设置Content-Type为'application/pdf'，读取文件类型为'binary'，然后将PDF内容返回。

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

在一些业务需求之中，例如打开页面，就可以让用户直接读pdf内容，如何实现呢？可以借助html iframe标签来实现：

<div>
    <iframe src="http://192.1.2.151:8082/cmas/demo.pdf" width="100%" height="900px" >
    </iframe>
</div>
复制代码

其中src 需要填入url地址，这个地址只要后端处理返回pdf流即可，下面使用node express后端中间件实现

app.get('/cmas/demo.pdf',(req,res)=>{
  var content=fs.readFileSync('./dist/demo.pdf',"binary")
  res.setHeader("Content-Type" ,"application/pdf")
  res.writeHead(200, "Ok");
  res.write(content,"binary"); //格式必须为 binary，否则会出错
  re