老规矩，上效果图
这个页面是最复杂的页面，但也很简单。
PDF文件使用浏览器直接打开是不行的，除非是计算机，而且要装有PDF阅读软件，但平板怎么办？下载到本地再编一个PDF阅读器？我还没那个闲功夫，不过有强大的互联网，有开放的github，这个就好办了。大家可以去搜索一下一个叫PDF.JS的项目，这个项目就是利用JS解释渲染PDF文件的，不过有个缺点，要html5才支持，不过还好，项目的目标平板是华为的荣耀×1，安卓4.0以上的版本，webview已经支持html5了，所以就很容易解决啦。
先去下载支持库，https://github.com/mozilla/pdf.js，在页面右下角有Download ZIP，可以下载整个项目，我懒得分析学习，解压后整个拷贝到IIS目录了，把文件夹名改为PDFViewer，改其它名字老规矩，自己随意，但要注意修改JS的代码。
先上html代码
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ViewFile.aspx.cs" Inherits="MeetingSys.ViewFile" %>
<%@ Register TagName="WapTitle" TagPrefix="UC_Title" Src="AppUC/Title.ascx" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-Control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta name="viewport" content="user-scalable=yes, width=device-width"/>
<title></title>
<link rel="stylesheet" type="text/css" href="..\Styles\WapStyle.css"/>
<script type="text/javascript" src="..\Scripts\MeetingSys.js"></script>
<script type="text/javascript" src="..\PDFViewer\src\shared\util.js"></script>
<script type="text/javascript" src="..\PDFViewer\src\display\api.js"></script>
<script type="text/javascript" src="..\PDFViewer\src\display\metadata.js"></script>
<script type="text/javascript" src="..\PDFViewer\src\display\canvas.js"></script>
<script type="text/javascript" src="..\PDFViewer\src\display\webgl.js"></script>
<script type="text/javascript" src="..\PDFViewer\src\display\pattern_helper.js"></script>
<script type="text/javascript" src="..\PDFViewer\src\display\font_loader.js"></script>
<script type="text/javascript" src="..\PDFViewer\src\display\annotation_helper.js"></script>
<script type="text/javascript">
PDFJS.workerSrc ='../PDFViewer/src/worker_loader.js';
var FileURL = '<%=MeetingFile %>';
var PageNum = 1;
var PageCount = 0;
//加载PDF文件，并指定显示的页码
function RenderPage(num) {
PDFJS.getDocument(FileURL).then(function (pdf) {
pdf.getPage(num).then(function (page) {
var scale = 1;
var viewport = page.getViewport(scale);
var canvas = document.getElementById('the-canvas');
var context = canvas.getContext('2d');
canvas.height = viewport.height;
canvas.width = viewport.width;
var renderContext = {
canvasContext: context,
viewport: viewport
};
page.render(renderContext);
PageCount = pdf.numPages;
document.getElementById("trip").innerHTML = "第" +PageNum+ "页/共" + PageCount + "页";
});
});
}
//上一页
function goPrevious() {
if (PageNum <= 1)
return;
PageNum--;
RenderPage(PageNum);
}
//下一页
function goNext() {
if (PageNum >= PageCount)
return;
PageNum++;
RenderPage(PageNum);
}
//首页
function goFirst() {
PageNum = 1;
RenderPage(PageNum);
}
//尾页
function goLast() {
PageNum = PageCount;
RenderPage(PageNum);
}
</script>
</head>
<body οnlοad="RenderPage(PageNum);">
<form id="form1" runat="server">
<div>
<UC_Title:WapTitle ID="TopTitle" runat="server" />
<div id="PopMenu">
<p οnclick="javascript :history.back(-1)">查看会议文件</p>
<hr style="border:0;background-color:#777777;height:1px;margin: 0;padding:0;"/>
<p οnclick="PopContact();">联系我们</p>
<p οnclick="PopAbout();">关于系统</p>
</div>
<div><canvas id="the-canvas"/></div>
<div id="ToolBar">
<div id="first"οnclick="goFirst();"><img style="width:3.6em;height:1.8em;" src="..\WebImg\first.png" alt="" /></div>
<div id="prev" οnclick="goPrevious();"><img style="width:3.6em;height:1.8em;" src="..\WebImg\Prev.png" alt="" /></div>
<div id="last" οnclick="goLast();"><img style="width:3.6em;height:1.8em;" src="..\WebImg\last.png" alt="" /></div>
<div id="next" οnclick="goNext();"><img style="width:3.6em;height:1.8em;" src="..\WebImg\Next.png" alt="" /></div>
<div id="tripdiv"><span id="trip">第页共页</span></div>
</div>
</div>
</form>
</body>
</html>
挑些重要的代码讲讲。
var FileURL = '<%=MeetingFile %>';这句代码是在后台定义一个全局变量，这个变量用来指定PDF文件的路径。
<body οnlοad="RenderPage(PageNum);">这里用来页面加载JS函数，加载PDF文件的第一页
<div><canvas id="the-canvas"/></div>这个就是显示PDF文件内容的容器啦，div这个不多说了，是限制显示的范围的，不加会出现滚动条，加了就会自动适应屏幕了。canvas元素是html5才有的，简单来说，它就是一个画板，用来画画的，PDF.JS就是把PDF文件渲染成一张张的图片，在canvas上面画出来。
为了canvas好看点，弄个圆角边框显得高大上，给它个CSS玩
the-canvas的样式
#the-canvas
{
position:fixed;
width:96%;
left:2%;
right:2%;
top:2.7em;
height:auto;
border:1px solid #999;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}工具栏嵌套的层必须按这个顺序写，否则后果自负，会乱成一团的，哈哈。需要的图标自己制作，那个显示多少页的JS代码在RenderPage里面，就是那句“document.getElementById("trip").innerHTML = "第" +PageNum+ "页/共" + PageCount + "页";”
上后台代码
public partial class ViewFile : System.Web.UI.Page
{
public string MeetingFile = "";
protected void Page_Load(object sender, EventArgs e)
{
string FileID=Request.QueryString["ID"];
MeetingFile = @"../MeetingFile/" + MeetingOP.DataOP.GetAny("MeetingFile", "mFileName", "ID", FileID);
TopTitle.sTitle = MeetingOP.DataOP.GetAny("MeetingFile", "mTitle", "ID", FileID);
}
}好，样式表大放送
ToolBar层样式
#ToolBar
{
position:fixed;
background-image: -webkit-gradient(linear, left top, left bottom, from(#39BFE4), to(#058BB0));
margin: 0;
border-bottom: 1px solid #666;
border-left: 1px solid #666;
border-right: 1px solid #666;
width:100%;
height:1.8em;
bottom:0;
border-top:1px solid #999;
z-index:1100;
}#first
{
width:3.6em;
height:1.8em;
display: block;
border-right: 1px solid #666;
float:left;
}#prev
{
width:3.6em;
height:1.8em;
display: block;
left:3.6em;
border-right: 1px solid #666;
float:left;
}#next
{
width:3.6em;
height:1.8em;
display: block;
right:3.6em;
border-left: 1px solid #666;
float:right;
}last层样式
#last
{
width:3.6em;
height:1.8em;
display: block;
border-left: 1px solid #666;
float:right;
}#tripdiv
{
margin:auto;
height:1.8em;
line-height:1.8em;
color: #FFF;
display: block;
font-size: 1em;
font-weight: bold;
text-align: center;
text-decoration: none;
}至于用户管理、终端管理，系统优化，等有项目开发经费再说，不要钱的项目开发就这鸟样了。
感觉俺完全对得起单位那丁点工资了，哈哈。
2157
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
