Coding4Fun - 在 IFrame 內嵌顯示 PDF 文件

2021-01-16 12:20 PM

#黑輪的 Coding 日常

哈囉大家好我是黑輪，你今天寫 Code 了嗎？(仿一輪 Style)

閒來無事，試做了一個有趣小東西。

在網頁用一個 IFrame 內嵌 PDF 文件，點連結可切換檔案，操作起來像這樣：

程式還蠻簡單的，前端網頁放一個 IFrame 設 name="reader"，兩個 <a> 連結指向 PDF 檔案 URL 並指定 target="reader"。另外我有用到之前介紹過的 CSS flex 佔滿剩餘高度技巧：

<!DOCTYPE html>
<html>
<head>
	<meta charset=utf-8>
	<style>
	html,body { margin: 0; padding: 0; height: 100%; font-size: 10pt; }
	body { display: flex; flex-direction: column; }
	div { height: 25px ; padding: 12px; }
	iframe { flex-grow: 1; width: 100%; }
	a { 
	    background-color: #03A9F4; color: white;
		padding: 3px 12px; text-decoration: none;
		border-radius: 3px; text-shadow: 1px 1px 1px #333;
	}
	</style>
</head>
<body >
<div>
	<a href="view.aspx?doc=1" target="reader">ASP.NET 防駭指南</a> 
	<a href="view.aspx?doc=2" target="reader">被遺忘的文字利器—探索.NET Regular Expression 元件</a> 
</div>
<iframe  name="reader"></iframe>
</body>
</html>

後端部分我是用 ASPX 依參數傳回不同 PDF，寫法如下：

<%@Page Language="C#"%>
<script runat="server">
byte[] GeneratePdfContent(string id) 
{
	//從儲存服務取出 PDF，此處以讀檔模擬
	var filePath = id == "1" ? 
		"D:\\ASP.NET Security.pdf" :
		"D:\\dotNET Regular Expression.pdf";
	return System.IO.File.ReadAllBytes(filePath);
}
void Page_Load(object sender, EventArgs e) 
{
	Response.ContentType = "application/pdf";
	Response.BinaryWrite(GeneratePdfContent(Request["doc"]));
	Response.End();
}
</script>

試了一下，IE 嘛 A 通! 感動~ (記得要安裝 Acrobat Reader 或 Foxit Reader，IE 需要它們提供閱讀 PDF 的附加元件)