Word/Excel 在线预览
前言
近日项目中做到一个功能，需要上传附件后能够在线预览。之前也没做过这类似的，于是乎就查找了相关资料，.net实现Office文件预览大概有这几种方式：
① 使用Microsoft的Office组件将文件直接转换为html文件（优点：代码实现最简单，工作强度最小。缺点：效果极差）
②使用Microsoft的Office组件将文件转换为PDF格式文件，然后再使用pdf2swf转换为swf文件，也就是flash文件在使用FlexPaper展示出来（优点：预览效果能接受，缺点：代码量大）
③使用Office online(优点：表现完美，缺点：不适合中小企业应用)
由于开发时间短而且还有其他功能点需要完成，所以暂时先已第一种方式实现了，这里也主要讲第一种方式，效果如下图：
具体实现
这里简单提一下效果图中的遮罩效果和上传实现，有喜欢的朋友也可以参考参考。
遮罩效果就是HTML+CSS+JS来实现的，全部代码如下：
<!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>
<title>弹出层</title>
<script src="jquery-1.6.2.min.js" type="text/javascript"></script>
<style>
.black_overlay{
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index:1001;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=80);
}
.white_content {
display: none;
position: absolute;
top: 10%;
left: 10%;
width: 80%;
height: 80%;
border: 16px solid lightblue;
background-color: white;
z-index:1002;
overflow: auto;
}
.white_content_small {
display: none;
position: absolute;
top: 20%;
left: 30%;
width: 40%;
height: 50%;
border: 16px solid lightblue;
background-color: white;
z-index:1002;
overflow: auto;
}
</style>
<script type="text/javascript">
//弹出隐藏层
function ShowDiv(show_div,bg_div){
document.getElementById(show_div).style.display='block';
document.getElementById(bg_div).style.display='block' ;
var bgdiv = document.getElementById(bg_div);
bgdiv.style.width = document.body.scrollWidth;
// bgdiv.style.height = $(document).height();
$("#"+bg_div).height($(document).height());
};
//关闭弹出层
function CloseDiv(show_div,bg_div)
{
document.getElementById(show_div).style.display='none';
document.getElementById(bg_div).style.display='none';
};
</script>
</head>
<body>
<input id="Button1" type="button" value="点击弹出层" onclick="ShowDiv('MyDiv','fade')" />
<!--弹出层时背景层DIV-->
<div id="fade" class="black_overlay">
</div>
<div id="MyDiv" class="white_content">
<div style="text-align: right; cursor: default; height: 40px;">
<span style="font-size: 16px;" onclick="CloseDiv('MyDiv','fade')">关闭</span>
</div>
目前来说，我还是喜欢这个自己改造的弹出层。自己在项目中也用的是这个。
</div>
</body>
</html>
上传的话，因为文件比较小，所以采用的是保存在服务器，在数据库中存放路径的方式
前台代码
<div class="white_content" id="MyDiv" style="text-align: center; display: none;">
<div style="text-align: right; cursor: default; height: 40px;">
<span style="font-size: 16px;" onclick="CloseDiv('MyDiv','fade')">关闭</span>
</div>
<tr style="width: 50%" id="upload_Image">
<h1>
请上传常见问题附件</h1>
<td align="right" class="Title">
上传附件
</td>
<td>
<asp:FileUpload ID="FileUpload1" runat="server" />
<asp:Label ID="label1" runat="server" ForeColor="Red"></asp:Label>
<asp:Button ID="UploadButton" runat="server" Text="上传附件" OnClick="UploadButton_Click" />
</td>
</tr>
<tr>
<td colspan="2" align="center" id="show_image" style="visibility: hidden">
<asp:Image ID="Image1" runat="server" Height="118px" Width="131px" />
</td>
</tr>
</div>
后台方法
try
{
string FullName = FileUpload1.PostedFile.FileName;//获取附件物理地址
FileInfo fi = new FileInfo(FullName);
string name = fi.Name;//获取附件名称
string type = fi.Extension;//获取附件类型
if (type == ".xls" || type == ".xlsx" || type == ".doc" || type == ".docx" || type == ".pdf")
{
string SavePath = Server.MapPath("~\\uploadFile");//附件保存到文件夹下
if (!Directory.Exists(SavePath))
{
Directory.CreateDirectory(SavePath);
}
this.FileUpload1.PostedFile.SaveAs(SavePath + "\\" + name);//保存路径
#region 将附件内容保存到数据库中
int showsuccess = CMSModelManager.Submitted_questionsDAO.Save_File(name,type,SavePath);
if (showsuccess == )
{
this.label1.Text = "上传成功";
}
else
{
this.label1.Text = "服务器繁忙，请稍后重试";
}
#endregion
}
else
{
this.label1.Text = "请选择正确的格式附件";
}
}
catch (Exception ex)
{
Response.Write(ex.Message);
}
图中所示的将Word转换成HTML的实现方式：
首先新建一个帮助类
using System;
using System.Collections.Generic;
using System.Web;
//using Microsoft.Office.Core;
using Word = Microsoft.Office.Interop.Word; namespace Com.VanruPortal.Admin
{
public class Office2HtmlHelper
{
/// <summary>
/// Word转成Html
/// </summary>
/// <param name="path">要转换的文档的路径</param>
/// <param name="savePath">转换成html的保存路径</param>
/// <param name="wordFileName">转换成html的文件名字</param>
public static void Word2Html(string path, string savePath, string wordFileName)
{ Word.ApplicationClass word = new Word.ApplicationClass();
Type wordType = word.GetType();
Word.Documents docs = word.Documents;
Type docsType = docs.GetType();
Word.Document doc = (Word.Document)docsType.InvokeMember("Open", System.Reflection.BindingFlags.InvokeMethod, null, docs, new Object[] { (object)path, true, true });
Type docType = doc.GetType();
string strSaveFileName = savePath + wordFileName + ".html";
object saveFileName = (object)strSaveFileName;
docType.InvokeMember("SaveAs", System.Reflection.BindingFlags.InvokeMethod, null, doc, new object[] { saveFileName, Word.WdSaveFormat.wdFormatFilteredHTML });
docType.InvokeMember("Close", System.Reflection.BindingFlags.InvokeMethod, null, doc, null);
wordType.InvokeMember("Quit", System.Reflection.BindingFlags.InvokeMethod, null, word, null);
}
/// <summary>
/// Excel转成Html
/// </summary>
/// <param name="path">要转换的文档的路径</param>
/// <param name="savePath">转换成html的保存路径</param>
/// <param name="wordFileName">转换成html的文件名字</param>
public static void Excel2Html(string path, string savePath, string wordFileName)
{
string str = string.Empty;
Microsoft.Office.Interop.Excel.Application repExcel = new Microsoft.Office.Interop.Excel.Application();
Microsoft.Office.Interop.Excel.Workbook workbook = null;
Microsoft.Office.Interop.Excel.Worksheet worksheet = null;
workbook = repExcel.Application.Workbooks.Open(path, Type.Missing, Type.Missing, Type.Missing, Type.Missing, Type.Missing, Type.Missing, Type.Missing, Type.Missing, Type.Missing, Type.Missing, Type.Missing, Type.Missing, Type.Missing, Type.Missing);
worksheet = (Microsoft.Office.Interop.Excel.Worksheet)workbook.Worksheets[];
object htmlFile = savePath + wordFileName + ".html";
object ofmt = Microsoft.Office.Interop.Excel.XlFileFormat.xlHtml;
workbook.SaveAs(htmlFile, ofmt, Type.Missing, Type.Missing, Type.Missing, Type.Missing, Microsoft.Office.Interop.Excel.XlSaveAsAccessMode.xlNoChange, Type.Missing, Type.Missing, Type.Missing, Type.Missing, Type.Missing);
object osave = false;
workbook.Close(osave, Type.Missing, Type.Missing);
repExcel.Quit();
} }
}
后台调用方法
#region 上传成功后将文件转换
string physicalPath = Server.MapPath(Server.UrlDecode("/uploadFile"+"\\"+ name));//读取相对路径
string extension = Path.GetExtension(physicalPath);//获取后缀名 string[] show_name = name.Split(new string[] { "." }, StringSplitOptions.RemoveEmptyEntries);//此处的name是上面上传附件中的名称分割
string show_name_View = show_name[];//拿到实际name
switch (extension)
{ case ".doc":
case ".docx":
Office2HtmlHelper.Word2Html(MapPath("/uploadFile" + "\\" + name + ""),
MapPath("/Html/"), "" + show_name_View + "");//调用帮助类中生成WordHtml的方法,并保存起来
Response.Write("<script>window.open('/Html/" + show_name_View + ".html','_blank')</script>");//跳转并打开保存的相对路径中hmtl文件
break;
case ".xls":
case ".xlsx":
Office2HtmlHelper.Excel2Html(MapPath("/uploadFile" + "\\" + name + ""),
MapPath("/Html/"), "" + show_name_View + "");
Response.Write("<script>window.open('/Html/" + show_name_View + ".html','_blank')</script>");
break;
default:
break;
}
#endregion
至此，一个简易的上传附件在线浏览已经全部实现
如果小伙伴有更好得实现方式或者其他建议，欢迎留言告知～
Word/Excel 在线预览的更多相关文章
- 在线操作word和在线预览查找的资料记录
在线操作word和在线预览查找的资料记录 在线操作word查找的资料记录 富文本操作 http://fex.baidu.com/ueditor/ 控件类 通过 js 调用控件操作 word 文档 1. ...
- .net core 实现excel 和 word 的在线预览
最新在搞文件的在线预览,网上很多免费的方案都需要是电脑安装office的,这要就很麻烦:收费的插件又太贵了. 不过还是找到一款相对好用的免费在线预览插件. 直接在nuget上搜索ce.office.e ...
- .net 实现Office文件预览,word文件在线预览、excel文件在线预览、ppt文件在线预览
转自源地址:http://www.cnblogs.com/GodIsBoy/p/4009252.html,有部分改动 使用Microsoft的Office组件将文件转换为PDF格式文件,然后再使用pd ...
- PDF/WORD/EXCEL 图片预览
一.PDF/WORD/EXCEL 转 XPS 转 第一页内容 转 图片 WORD.EXCEL转XPS (Office2010) public bool WordToXPS(string sourceP ...
- Excel在线预览(通过poi转html,含里面的图片)
支持03和07excel转html,直接上代码 测试类 /** * 主方法 * @author asus * */ public class App2 { public static void mai ...
- .net mvc使用FlexPaper插件实现在线预览PDF,EXCEL,WORD的方法
FlexPaper插件可以实现在浏览器中在线预览pdf,word,excel等. 在网上看到很多关于这个插件实现预览的技术,但是很难做到word和excel在线预览. pdf很好实现. 首先下载相关的 ...
- pc或者微信上用pdf.js在线预览pdf和word
最近项目要求pdf和word可以在线预览功能,pc端还好解决,但是微信端就有点坑了,pc端原来的思路是将文件转成base64,然后用html格式显示 ,但是微信端不支持, 这种方式就pass掉了,谷歌 ...
- [Asp.net]常见word，excel，ppt，pdf在线预览方案，有图有真相，总有一款适合你！
引言 之前项目需要,查找了office文档在线预览的解决方案,顺便记录一下,方便以后查询. 方案一 直接在浏览器中打开Office文档在页面上的链接.会弹出如下窗口: 优点:主流浏览器都支持. 缺点: ...
- ASP.NET MVC在线预览Excel、Word、TXT、PDF文件
代码: using System; using System.Collections.Generic; using System.Linq; using System.Web; using Syste ...
随机推荐
- C++内存对齐总结
大家都知道,C++空类的内存大小为1字节,为了保证其对象拥有彼此独立的内存地址.非空类的大小与类中非静态成员变量和虚函数表的多少有关. 而值得注意的是,类中非静态成员变量的大小与编译器内存对齐的设置有 ...
- 数据库优化案例——————某市中心医院HIS系统
记得在自己学习数据库知识的时候特别喜欢看案例,因为优化的手段是容易掌握的,但是整体的优化思想是很难学会的.这也是为什么自己特别喜欢看案例,今天也开始分享自己做的优化案例. 最近一直很忙,博客产出也少的 ...
- Python-Jenkins API使用 —— 在后端代码中操控Jenkins
最近在工作中需要用到在后台代码中触发Jenkins任务的构建,于是想到Jenkins是否有一些已经封装好的API类库提供,用于处理跟Jenkins相关的操作.下面就简单介绍下我的发现. Linux C ...
- 关于VS2015 ASP.NET MVC添加控制器的时候报错
调试环境:VS2015 数据库Mysql WIN10 在调试过程中出现类似下两图的同学们,注意啦. 其实也是在学习的过程中遇到这个问题的,找了很多资料都没有正面的解决添加控制器的时候报错的问题,还是 ...
- vue.js学习笔记
有了孩子之后,元旦就哪也去不了了(孩子太小),刚好利用一些时间,来公司充充电补补课,学习学习新技术,在这里做一个整理和总结.(选择的东西,既然热爱就把他做好吧!). 下来进入咱们的学习环节: 一.从H ...
- java使用websocket，并且获取HttpSession，源码分析
转载请在页首注明作者与出处 http://www.cnblogs.com/zhuxiaojie/p/6238826.html 一:本文使用范围 此文不仅仅局限于spring boot,普通的sprin ...
- Android Weekly Notes Issue #236
Android Weekly Issue #236 December 18th, 2016 Android Weekly Issue #236 本期内容包括: Google的物联网平台Android ...
- iOS系列教程 目录 (持续更新...)
前言: 听说搞iOS的都是高富帅,身边妹子无数.咱也来玩玩.哈哈. 本篇所有内容使用的是XCode工具.Swift语言进行开发. 我现在也是学习阶段,每一篇内容都是经过自己实际编写完一遍之后,发现 ...
- 跨域问题，前端主动向后台发送cookie
跨域是什么? 从一个域名的网页访问另一个域名的资源,就会出现跨域.只要协议.端口.域名有一个不同就会出现跨域 例如: 1.协议不同 http://www.baidu.com:80 和 https:/ ...
- 记从安装centos系统在到使用mono3.2部署MVC过程遇到的问题
一.安装虚拟机并安装配置系统 我不太愿意去下载vmware就用系统里面自带的Hyper-V 系统我选择了最新版本的CentOs6.4 下载地址:http://mirrors.163.com/cento ...