前端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文件存放在後端，須要由後端提供內容。