html写table转换成excel并下载

已于 2024-08-01 13:24:32 修改
阅读量223 收藏
点赞数 2
文章标签： html excel 前端
于 2024-08-01 13:23:22 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44032619/article/details/140845208
版权 
getInfo() {

//text部分即html写的table表格，blob是生成文件类型，getExportInfo函数是下载导出

let text = `<!DOCTYPE html>
<html>
<head>
    <title>Table to Excel</title>
    <style>
        table, th, td {
            border: 1px solid black;
            border-collapse: collapse;
        }
        .h-50 {
            height: 50px; /* 设置单元格高度为50像素 */
            border: none;
            border-bottom: 1px solid black;
        }
        .h-100 {
            height: 100px; /* 设置单元格高度为100像素 */
            border: none;
         }
        .h-60 {
            height: 60px; /* 设置单元格高度为60像素 */
            border: none;
         }
         .border-nones {
         	border:none;
	border-left : 1px solid black;
         }
         .border-none {
         	border:none;
         }
        .h-60s {
         	 height: 60px; /* 设置单元格高度为60像素 */
           	 border: none;
                 border-left : 1px solid black;
         }
    </style>
</head>
<body>
    <table class="border-none">
         <colgroup>     //修改单元格的宽度
            <col style="width: 40px;">
            <col style="width: 60px;"> 
            <col style="width: 60px;"> 
            <col style="width: 90px;"> 
            <col style="width: 120px;"> 
            <col style="width: 120px;"> 
            <col style="width: 90px;"> 
            <col style="width: 90px;"> 
            <col style="width: 80px;"> 
            <col style="width: 40px;"> 
        </colgroup>
        <tbody>
	<tr>
	       <td colspan="10" class="border-none" style="font-size: 22px; font-weight: bold; height: 100px;  padding-left:60px;">附件1 </td>
	</tr>
	<tr>
	       <td colspan="10" class="border-none" style="font-size: 20px; font-weight: bold; text-align:center;">报告表 </td>
	</tr>
        	<tr>
	       <td colspan="6" class="border-none" style="height:50px; padding-left:60px;">填表日期：     年    月    日 </td>
	       <td colspan="4" class="border-none" style="height:50px; ">金额单位：元（列至角分）</td>
	</tr>
        </tbody>
        <thead>
            <tr>
                <th colspan="4">识别号</th>
                <td colspan="2"></td>
	            <th colspan="2">名称</th>
	            <td colspan="2"></td>
            </tr>
            <tr>
                <th colspan="4">开始日期</th>
	            <td colspan="2"></td>
                <th colspan="2">结束日期</th>
	            <td colspan="2"></td>
            </tr>
            <tr>
                <th>序号</th>
                <th>项目1</th>
                <th>项目2</th>
                <th>项目3</th>
                <th>项目4</th>
                <th>项目5</th>
                <th>项目6</th>
                <th>项目7</th>
                <th>项目8</th>
                <th>备注</th>
            </tr>
       </thead>
       <tbody>`
    for(let i=0;i<3;i++) {
        text +=`
	        <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
	        </tr>`
     }     
     text +=`
            <tr>
                <td>合计</td>
                <td>-</td>
                <td>-</td>
                <td></td>
                <td>-</td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td>-</td>
	        </tr>
            <tr>
                <td colspan="10" class="h-100" style="border-left:1px solid black; border-right:1px solid black;">谨声明：本表是真实的填写。</td>
            </tr>
             <tr>
                <td colspan="5" class="h-60" style="border-left:1px solid black;"></td>
                <td colspan="5" class="h-60" style="border-right:1px solid black;">（签章）：</td>
             </tr>
             <tr>
	<td colspan="7" class="h-50" style="border-left:1px solid black;"></td>
                <td colspan="3" class="h-50" style="border-right:1px solid black;"> 年      月      日</td>
            </tr>
             <tr>
                <td colspan="6" class="h-60"  style="border-left:1px solid black;">签字：</td>
	<td colspan="4" class="h-60s" style="border-right:1px solid black;">名称： </td>
             </tr>
             <tr>
                <td colspan="6" class="h-60" style="border-left:1px solid black;">号码：</td>
	<td colspan="4" rowspan="2" class="border-nones" style="border-right:1px solid black;">（章）：</td>
             </tr>
              <tr>
                <td colspan="6" class="h-60" style="border-left:1px solid black;">签章: </td>
             </tr>
             <tr>
                <td colspan="6" class="h-60" style="border-bottom:1px solid black; border-left:1px solid black;">号码：</td>
	<td colspan="4" class="h-60s" style="border-bottom:1px solid black; border-right:1px solid black;">日期:     年     月     日</td>
             </tr>
       </tbody>
    </table>
</body>
</html> `

const blob = new Blob([`\ufeff` + text], {type: "application/vnd.ms-excel;charset=utf-8;",});

this.getExportInfo(blob, "报告表");

}
getExportInfo(blob,filename) {

  // 创建一个指向Blob的URL
  const url = URL.createObjectURL(blob);
  // 创建一个a元素，用于触发下载
  const a = document.createElement("a");
  a.href = url;
  a.download = filename;
  // 添加a元素到文档并模拟点击，然后移除
  document.body.appendChild(a);
  a.click();
  document.body.removeChild(a);
  // 清理URL对象
  URL.revokeObjectURL(url);
}

胖丫子
关注
html table 如何导出为excel表格案例分享
qq_41760419的博客
02-07 895
ASP.NET Core Blazor在razor页面手工绘制Table后如何用js导出到Excel
页面html Table表格导出Execl
08-20
将页面中的HtmlTable，导出为Execl 支持合并单位元、合并行等操作。续之前的优化了计算算法，升级了代码。
[原]谈HTML表格导出Excel
weixin_33805743的博客
05-18 95
其实这个话题真的很老了，网上到处都有解决方案。不过我还是在这里介绍下吧。   1：Excel是认识HTML代码的，打开http://www.google.com/ ,将html代码右键另存为google.html. 2：使用Excel打开google.html.结果如下图:   从上面的截图我们可以发现Excel是认识HTML代码的，并且能够解析HTML代码。 3：我们知道Exce...
ReactHTMLTableToExcel 使用教程
最新发布
gitblog_00724的博客
08-24 789
ReactHTMLTableToExcel 使用教程 ReactHTMLTableToExcelConvert HTML table to Excel file and download项目地址:https://gitcode.com/gh_mirrors/re/ReactHTMLTableToExcel 项目介绍 ReactHTMLTableToExcel 是一个用于将 HTML 表格转换为 ...
HTML导出table数据到excel
03-20
一个例子，实现导出HTML中的table数据到excel。 一个完整例子，实现导出HTML中的table数据到excel。
前端HTML 表格导出到excel中（纯前端导出不经过后台）
Be a Man Keep fighting for destination
07-03 1874
<a id="dlink" style="display:none;"></a> <input type="button" onclick="tableToExcel('tables', 'name', 'myfile.xls')" value="Export to Excel"> <script type="text/javascript"...
HTML table 导出为 EXCEL
Young_Gao的博客
09-14 2003
HTML 把 table 中的数据 导出为 EXCEL
C#将html table 导出成excel实例
01-21
代码如下:public void ProcessRequest (HttpContext context) { string elxStr = “<table><tbody><tr><td>1</td><td>11</td></tr><tr><td>2</td><td>22</td></tr></tbody></table>”; context.Response.Clear();...
页面的table直接转excel并下载（不需要经过后台）
07-05
本篇文章将详细探讨如何使用JavaScript库`table2excel`实现在前端页面上直接将HTML表格转换为Excel并进行下载。 首先，`table2excel`是一个轻量级的JavaScript库，它允许用户通过简单的API调用来将HTML表格转换为...
ReactHTMLTableToExcel:将HTML表格转换为Excel文件并下载
05-28
将HTML表格下载为.xls格式的Excel文件 没有服务器端代码 设置所需的.xls文件名和工作表 设置样式所需的类名和ID 支持的IE 11 选项 可用属性的列表可以在下面找到。 这些必须传递给包含的ReactHTMLTableToExcel组件...
html2excel是一款将html中表格table转化成excel的工具包.
08-07
HTML2Excel是一款强大的工具包，专门用于将网页中的HTML表格数据转换为Excel文件，使得用户可以方便地处理和存储基于Web的数据。这个工具包支持多种Excel文件格式，包括老版本的.xls以及现代的.xlsx格式，这确保了...
table-download:从页面以电子表格格式下载 HTML 表格
05-31
表格下载 此插件用于从网页下载 HTML 表格作为 XLS 文件。 从网站安装。 目的 将 HTML 表格下载为 XLS 文件 内容 安装 下载存储库并解压。 转到并将其加载为临时扩展 浏览器兼容性： 下一步是什么 去做 学分 Christian Kaindl使用 i18n API 翻译 HTML 页面 信息 Table Download由Arun编写和维护许可证：麻省理工学院
下载表格.html
06-15
下载表格.html
jquery插件将html表格导出为excel格式文件tableexport
04-11
jquery插件将html表格导出为excel格式文件tableexport
jquery插件将html表格导出为excel格式文件tableexport.js插件
03-07
jquery插件将html表格导出为excel格式文件，点击按钮一键导出，只需要引入js，写几行代码块就可完成导出功能，写可修改，有案例。 tableexport.js插件
HTML table导出到Excel中的解决办法
weixin_34375233的博客
10-26 194
第一部分：html+js 1.需要使用的表格数据（先不考虑动态生成的table） <table class="table tableStyles" id="tables"> <caption>不正经的统计表</caption><!--可以生成表格的标题--> <thead> ...
js 纯前端实现.JSON数据和Excel .xls/.xlsx数据互转（react+antd上传下载）
m0_50851645的博客
03-29 634
最近项目上有个需求，需要前端去解析上传的Excel文件，并转成标准的JSON数据，同时还需要下载JSON数据并转换成Excel可打开的数据，今天需求做完，顺手整理下，借此方便自己增强理解～ 1.Excel转JSON //fileList指的是Excel文件的数据流 const file = fileList[0]; const fileReader = new FileReader(); fileReader.onload = event => { try {
HTML Table导出Excel
PinkCoder
03-28 2000
HTML Table导出Excel
HTML Table导出为excel格式
月下弦歌冷的博客
02-04 714
最近项目中有个需求是将页面写好的表格导出位excel格式，刚开始毫无头绪，经过一番查阅找到了解决办法，废话不多说直接上代码: const tableToExcel = (() => { const uri = 'data:application/vnd.ms-excel;base64,'; const template = '<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:s
使用JavaScript将HTML Table转换为Excel表格的示例代码
本文档主要介绍如何通过JavaScript和HTML将一个网页中的table数据转换成Excel（xls）格式。首先，我们看到的是一段HTML代码，其中包含了一个id为"GridTable"的表格，用于存储员工信息，包括员工编号、姓名、工作部门...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值