在WEB项目中经常遇到excel文档在线预览的需求,基本的解决思路有以下几大类:excel文档转PDF、excel文档直接转html、后台读取excel数据返回给前端利用Excel效果的表格插件如(HandsonTable)将数据进行展示、部署微软Office Online服务(office web apps)实现在线预览、在线的office预览服务(如谷歌docs、微软officeapps)。

EXCEL转HTML

excel转html可以通过第三方工具openoffice、微软office或者第三方类库如POI/NPOI、aspose.cell等转换为html文件。其中POI组件是开源免费的,Java版本叫POI,C#版本叫NPOI。但是转换的效果不是很好,有多个sheet页面的时候,POI会将所有sheet表格展示在一个网页里面,表格顶部会显示sheet名称,如果sheet很多的话页面会很长,出现滚动条页面样式不是很美观。

aspose.cells是收费组件,支持java、.net、.net core,免费使用时候转换出的html页面会有水印“Evaluation Only. Created with Aspose.Cells”如果excel存在多个sheet,aspose转换出来的网页会带选项卡,点击选项卡会展示对应的sheet页面内容,展示效果比POI转换出的html效果的好。

首先在后台使用aspose读取excel文件并返回转换好的html文件目录返回给前台

private readonly ILogger _logger;

private readonly IWebHostEnvironment _webHostEnvironment;

  1. public HomeController(ILogger<HomeController> logger, IWebHostEnvironment webHostEnvironment)
  2. {
  3. _logger = logger;
  4. _webHostEnvironment = webHostEnvironment;
  5. }
  6. public IActionResult Index()
  7. {
  8. return View();
  9. }
  10. public IActionResult Privacy()
  11. {
  12. return View();
  13. }
  14. [ResponseCache(Duration = 0, Location = ResponseCacheLocation.None, NoStore = true)]
  15. public IActionResult Error()
  16. {
  17. return View(new ErrorViewModel { RequestId = Activity.Current?.Id ?? HttpContext.TraceIdentifier });
  18. }
  19. /// <summary>
  20. /// 返回html地址
  21. /// </summary>
  22. /// <returns></returns>
  23. public string ExcelToHtml()
  24. {
  25. //程序根目录
  26. string rootpath = _webHostEnvironment.ContentRootPath;
  27. //程序下webroot根目录
  28. string webRootPath = _webHostEnvironment.WebRootPath;
  29. string filepath = webRootPath + "\\excelFile\\test.xlsx";
  30. //读取模板路径
  31. Workbook book = new Workbook(filepath);
  32. //filePath为保存文件的地址,需要服务端底下可以正常访问的路径
  33. book.Save(webRootPath+ "\\excelFile\\test.html", SaveFormat.Html);
  34. return "\\excelFile\\test.html";
  35. }

前端接收到后台返回的地址进行一个展示

点击查看代码
  1. @{
  2. ViewData["Title"] = "Home Page";
  3. }
  4. <script type="text/javascript">
  5. //预览excel
  6. function ExcelToHtml() {
  7. $.ajax({
  8. url: "/Home/ExcelToHtml",
  9. data: "",
  10. type: "get",
  11. async: false,
  12. success: function (data) {
  13. debugger
  14. console.log(data)
  15. //获得窗口的垂直位置
  16. var iWidth = 1400;
  17. var iHeight = 800;
  18. var iTop = (window.screen.availHeight - 30 - iHeight) / 2;
  19. //获得窗口的水平位置
  20. var iLeft = (window.screen.availWidth - 10 - iWidth) / 2;
  21. window.open(data, '_blank', 'height=' + iHeight + ',innerHeight=' + iHeight + ',width=' + iWidth + ',innerWidth=' + iWidth + ',top=' + iTop + ',left=' + iLeft + ',status=no,toolbar=no,menubar=no,location=no,resizable=no,scrollbars=0,titlebar=no');
  22. },error(err)
  23. {
  24. debugger
  25. }
  26. });
  27. }
  28. </script>
  29. <div class="text-center">
  30. <h1 class="display-4">Welcome</h1>
  31. <p>Learn about <a href="https://docs.microsoft.com/aspnet/core">building Web apps with ASP.NET Core</a>.</p>
  32. <button onclick="ExcelToHtml()">预览excel</button>
  33. </div>

效果如下

Aspose.Cells实现excel预览的更多相关文章

  1. Aspose.Cells导出Excel(1)

    利用Aspose.Cells导出excel 注意的问题 1.DataTable的处理 2.进行编码,便于中文名文件下载 3.别忘了Aspose.Cells.dll(可以自己在网上搜索) public ...

  2. 使用Aspose.Cells读取Excel

      最新更新请访问: http://denghejun.github.io Aspose.Cells读取Excel非常方便,以下是一个简单的实现读取和导出Excel的操作类: 以下是Aspose.Ce ...

  3. 报表中的Excel操作之Aspose.Cells(Excel模板)

    原文:报表中的Excel操作之Aspose.Cells(Excel模板) 本篇中将简单记录下Aspose.Cells这个强大的Excel操作组件.这个组件的强大之处,就不多说,对于我们的报表总是会有导 ...

  4. 怎么使用Aspose.Cells读取excel 转化为Datatable

    说明:vs2012 asp.net mvc4 c# 使用Aspose.Cells 读取Excel 转化为Datatable 1.HTML前端代码 <%@ Page Language=" ...

  5. 怎么利用Aspose.Cells 获取excel 数据表中sheet的名称

    说明:开发环境 vs2012 asp.net mvc4 c# 利用Aspose.Cells 获取Excel数据表的sheet的名称,并把获取的名称赋值给easyUI 的combobox 1.运行效果 ...

  6. Aspose.cells 读取Excel表中的图片问题

    一.说明 本文主要是讲解,怎么使用aspose.cells读取Excel表中的图片,并把图片转换成流或是image对象. 二.开发环境说明 开发工具vs2012,c#语言, 三.Aspose.cell ...

  7. C#使用Aspose.Cells导出Excel简单实现

    首先,需要添加引用Aspose.Cells.dll,官网下载地址:http://downloads.aspose.com/cells/net 将DataTable导出Xlsx格式的文件下载(网页输出) ...

  8. Aspose.Cells导出Excel(2)

    DataTable dtTitle = ds.Tables[]; DataTable dtDetail = ds.Tables[]; int columns = dtTitle.Columns.Cou ...

  9. 【转】Aspose.Cells读取excel文件

    Aspose是一个很强大的控件,可以用来操作word,excel,ppt等文件,用这个控件来导入.导出数据非常方便.其中Aspose.Cells就是用来操作Excel的,功能有很多.我所用的是最基本的 ...

  10. aspose.Cells 导出Excel

    aspose aspse.Cells可以操作Excel,且不依赖于系统环境. 使用模板,通过绑定输出数据源 这种适合于对格式没有特别要求的,直接绑定数据源即可.和数据绑定控件差不多. Workbook ...

随机推荐

  1. CDH6.2.0安装并使用基于HBase的Geomesa

    1. 查看CDH 安装的hadoop 和 hbase 对应的版本 具体可以参考以下博客: https://www.cxyzjd.com/article/spark_Streaming/10876290 ...

  2. 云原生之旅 - 3)Terraform - Create and Maintain Infrastructure as Code

    前言 工欲善其事,必先利其器.本篇文章我们介绍下 Terraform,为后续创建各种云资源做准备,比如Kubernetes 关键词:IaC, Infrastructure as Code, Terra ...

  3. 更改elasticsearch中索引的mapping

    文章转载自:https://www.cnblogs.com/uglyliu/p/12331964.html 昨天研发说在kibana中统计userid字段不出图,后来查到该字段显示冲突了,然后再查看了 ...

  4. ProxySQL SQL 注入引擎

    ProxySQL 2.0.9 引入了 libsqlinjection 作为识别可能的 SQL 注入攻击的机制. 启用 S​​QL 注入检测 要启用 SQL 注入检测,只需要启用变量 mysql-aut ...

  5. 第二章:视图层 - 6:QueryDict对象

    类的原型:class QueryDict[source] 在HttpRequest对象中,GET和POST属性都是一个django.http.QueryDict的实例.也就是说你可以按本文下面提供的方 ...

  6. 多字段特性及配置自定义Analyzer

    PUT logs/_doc/1 {"level":"DEBUG"} GET /logs/_mapping POST _analyze { "token ...

  7. 文档的CURD

    Index方式,需要指定ID 如果ID不存在,创建新的文档,状态是created 如果ID存在,会先删除现有ID的文档,然后创建一个新文档,ID数加1,状态是updated PUT test/_doc ...

  8. JSP实现登录删除添加星座等(带样式)

    功能要求 1.完成两个页面 2.第一个登陆页面login. jsp 3.第二个用户管理页面useManage. jsp 4.有登录功能(能进行用户名密码的校验,用户名若为自己的学号密码为班级号,允许登 ...

  9. day08-MySQL事务

    MySQL事务 先来看一个例子 有一张balance表: 需求:将tom的100块钱转到King账户中 执行的操作是: update balance set money = money -100 wh ...

  10. 大数据技术之HBase原理与实战归纳分享-上

    @ 目录 概述 定义 特点 数据模型 概述 逻辑结构 物理存储结构 数据模型 应用场景 基础架构 安装 前置条件 部署 启动服务 高可用 Shell操作 基础操作 命令空间 DDL DML 概述 定义 ...