前端iframe内嵌PDF展现方案

在一些业务需求之中，例如打开页面，就可让用户直接读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，不然会出错
  res.end();
})
复制代码

后端返回的Content-Type 设置为 "application/pdf",读文件时类型为"binary"便可，最后返回内容

使用这种方式好处在于不须要借助任何插件以及兼容性好，在IE10以上以及谷歌火狐上测试都没有问题，限制在于pdf文件存放在后端，须要由后端提供内容。