怎么把Excel表格转换成HTML格式？Excel转HTML

Excel表格可是几乎每天都能用的到，不是自己编辑发给同事，就是别人发来的，而且有时候不仅是对Excel表格进行编辑，还需要进行格式转换，最常见的就是Excel转PDF。几天你那小编给大家讲一个不常见的【Excel转HTML】，有需要的小伙伴赶紧看过来吧，只需要一个PDF转换器即可。

第一步，打开已经安装好的极强PDF转换器，点击页面左侧的【其他文档格式转换】，看见了，有一个【文件转HTML】选项，没错点它。然后点击【添加文件】，把需要进行转换的Excel表格文件加进来。

第二步，在页面下方勾选【自定义】选项，先把文件存储为设置好，然后点击【开始转换】。

第三步，稍等片刻，转换完成之后会有一个如下图所示的提示框，点击【确定】即可。

第四步，下面就预览一下Excel转HTML的成果如何，如下图所示还不错吧。

极强PDF转换器不仅是PDF转换器，还可以实现其他文件的格式转换，还等什么，赶紧来本站免费下载吧。

、在exl中编辑好你想要的表格形式，复制有内容的表格到dw右侧，如图：

2、将途中宽度去除，选中一个宽度，按Ctrl+F,点击“替换全部”。如图：

3、途中选中部分换成表格的表头代码：

表头代码：<table align="center" border="1" cellpadding="0" cellspacing="1" class="biaoge" style="text-align:center" width="100%">

<tbody>

4、将表格标题中的td和/td改成th和/th。如图：

5、选中右侧表格中有链接的表格，选择上方窗口中的属性面板，在html状态下，目标选择”_blank”。

6、左侧代码就是汇总表格的代码，复制到后台内容页的源码状态下即可。

言

如今各类BI产品大行其道，“数据可视化”成为一个热门词汇。相比价格高昂的各种BI软件，用Excel来制作动态报表就更加经济便捷。今天小编就将为大家介绍一下如何使用葡萄城公司的纯前端表格控件——SpreadJS来实现一个Excel动态报表：

实现步骤

1.在原始数据的基础上生成数据透视表

制作这样的数据大屏首先必须要明确目的，比如在这里围绕销售金额制作一个数据大屏，首先点击数据源，然后点击插入找到数据透视表，随后将年份放在行字段，然后将销售金额放在值字段，因为在这里数值比较大，可以选择销售金额这一列数据，然后按快捷键Ctrl 1调出格式窗口，点击自定义，将类型设置为0!.0,这样的话就变为了万元显示，然后在设计中找到总计，选择对行和列禁用，将数据透视表中的总计禁用掉。

2.根据数据生成图表

选择数据区域，然后在图表中找到饼图，随后为饼图添加数据标签，紧接着点击标签按Ctrl + 1调出格式窗口，勾选类别名称然后将分隔符设置为新的文本行，最后将无用的图例删掉即可，至此的第一个图表就制作完毕了。

为了添加更多图表，复制刚才设置的数据透视表，在复制的数据透视表中将年份这个字段拖走，然后将省份这个字段放在行字段，最后将数字更改为万元显示，然后插入一个横向的条形图，将无用的图例删除掉即可。需要注意的是，你需要设置几个图表，就需要复制几次数据透视表，更改为自己需要的字段，最后插入图表，在这里就以3个为例跟大家演示制作方法。

为了让多张图表能够联动变化，点击数据透视表，在工具栏中找到插入切片器，然后分别勾选，年份，省份，厂商点击确定，这样的话就插入了3个切片器，随后将他们更改下大小放在合适的位置即可。随后点击一个切片器，在切片器选项中选择链接到报表，勾选其他的两个报表即可，以此类推，其余的2个切片器也需要这样设置，设置完毕后就制作完毕了。

至此，一张简单的可视化数据报表就制作好了。有时候，制作好的可视化报表需要通过网络让更多的人查阅，那么有什么好办法呢？

实现在线化

下面小编为大家介绍如何使用借助SpreadJS实现在线化查看：

首先打开SpreadJS的学习指南：

按照学习指南上的代码进行编程实践：

<!DOCTYPE html>
<html>
<head>
  <meta charset='UTF-8'>
  <title>Spread-CDN</title>
  <link rel='icon' href='./assets/images/logo.png' type='image/x-icon'>
  <link
    href='https://cdn.grapecity.com.cn/SpreadJS/package-contents/16.2.2/spread-sheets/styles/gc.spread.sheets.excel2013white.css'
    rel='stylesheet' type='text/css' />
  <script type='text/javascript'
          src='https://cdn.grapecity.com.cn/SpreadJS/package-contents/16.2.2/spread-sheets/dist/gc.spread.sheets.all.min.js'></script>
  <script
    src='https://cdn.grapecity.com.cn/SpreadJS/package-contents/16.2.2/spread-sheets-charts/dist/gc.spread.sheets.charts.min.js'></script>
  <script
    src='https://cdn.grapecity.com.cn/SpreadJS/package-contents/16.2.2/spread-sheets-shapes/dist/gc.spread.sheets.shapes.min.js'></script>
  <script
    src='https://cdn.grapecity.com.cn/SpreadJS/package-contents/16.2.2/spread-sheets-slicers/dist/gc.spread.sheets.slicers.min.js'></script>
  <script
    src='https://cdn.grapecity.com.cn/SpreadJS/package-contents/16.2.2/spread-sheets-print/dist/gc.spread.sheets.print.min.js'></script>
  <script
    src='https://cdn.grapecity.com.cn/SpreadJS/package-contents/16.2.2/spread-sheets-barcode/dist/gc.spread.sheets.barcode.min.js'></script>
  <script
    src='https://cdn.grapecity.com.cn/SpreadJS/package-contents/16.2.2/spread-sheets-pdf/dist/gc.spread.sheets.pdf.min.js'></script>
  <script
    src='https://cdn.grapecity.com.cn/SpreadJS/package-contents/16.2.2/spread-sheets-pivot-addon/dist/gc.spread.pivot.pivottables.min.js'></script>
  <script
    src='https://cdn.grapecity.com.cn/SpreadJS/package-contents/16.2.2/spread-sheets-tablesheet/dist/gc.spread.sheets.tablesheet.min.js'></script>
  <script
    src='https://cdn.grapecity.com.cn/SpreadJS/package-contents/16.2.2/spread-sheets-ganttsheet/dist/gc.spread.sheets.ganttsheet.min.js'></script>
  <script
    src='https://cdn.grapecity.com.cn/SpreadJS/package-contents/16.2.2/spread-sheets-formula-panel/dist/gc.spread.sheets.formulapanel.min.js'></script>
  <script
    src='https://cdn.grapecity.com.cn/SpreadJS/package-contents/16.2.2/spread-excelio/dist/gc.spread.excelio.min.js'></script>
  <script
    src='https://cdn.grapecity.com.cn/SpreadJS/package-contents/16.2.2/spread-sheets-io/dist/gc.spread.sheets.io.min.js'></script>
  <script
    src='https://cdn.grapecity.com.cn/SpreadJS/package-contents/16.2.2/spread-sheets-resources-zh/dist/gc.spread.sheets.resources.zh.min.js'></script>
  <script>
    GC.Spread.Common.CultureManager.culture('zh-cn')
  </script>
  <style>
      * {
          margin: 0;
          padding: 0;
      }

      #app {
          overflow: hidden;
      }

      #spread-container {
          width: 100vw;
          height: 100vh;
      }
  </style>
</head>
<body>
<input type="file" id="file"/>
<div id='app'>
  <div id='spread-container'></div>
</div>

<script>
  const spread = new GC.Spread.Sheets.Workbook('spread-container')
  let sheet = spread.getActiveSheet()
  const fileElement = document.querySelector('#file')
  fileElement.addEventListener('change', function (e) {
    const file = e.target.files[0]
    spread.import(file, ()=>{
      fileElement.style.display = 'none'
    })
  })
</script>
</body>
</html>

这里使用<input type="file" />来选择本地文件，在成功导入后将该元素隐藏，以便在全屏预览报表时没有多余元素干扰。想导入其他模板时，只需刷新页面，用来选择模板文件的按钮就又出现了。

最后导入在Excel中制作好的报表模板，一张可在线浏览的动态Excel报表就大功告成了。

总结

文章只是简单演示，没有加复杂的样式，如果您想做出更好的显示效果，可以充分调用自己的艺术细胞，做出更加美观炫酷的动态报表，甚至做一个数据大屏也是可以实现的，如果您对的SpreadJS感兴趣的话，也欢迎访问SpreadJS官网。

在线咨询

上一篇：监控安装超详细教学教程，学会又多一门技能
下一篇：HTML属性及实例

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商