b2科目四模拟试题多少题驾考考爆了怎么补救
b2科目四模拟试题多少题 驾考考爆了怎么补救
首页 > 电脑软件 >

使用JavaScript将页面上的表格导出为Excel文件

电脑杂谈　 发布时间：2020-10-22 08:02:23　 来源：网络整理

.body 引用 excel 当前内容_.body 引用 excel 当前内容

如果页面上显示了数据表，并且用户希望将该表导出为Excel文件，那么如果要求不高，则可以在没有服务器的情况下生成该表，而是直接使用JavaScript Blob和Object URL特征将导出为表格。但是，丑陋的故事排在第一位。本文使用Excel的功能来打开HTML文档，因此导出的表实际上是HTML文档，其扩展名只能是.xls，不能是.xlsx，否则Excel无法打开。 （但是，我已经看到了使用JavaScript生成真正的Excel文件的方法。在此不再赘述。）

实现代码如下，包括HTML页面和JavaScript脚本：

.body 引用 excel 当前内容_.body 引用 excel 当前内容

DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>title>
    <meta charset="utf-8" />
    <style>
        /* 此样式仅用于浏览器页面效果，Excel不会分离表格边框，不需要此样式 */
        table {
            border-collapse: collapse;
        }
    style>
head>
<body>
    
    <table border="1">
        
        <caption>学生成绩表caption>
        <tr>
            
            <th rowspan="2">编号th>
            <th rowspan="2">学号th>
            <th rowspan="2">姓名th>
            <th rowspan="2">性别th>
            <th rowspan="2">年龄th>
            <th colspan="3">成绩th>
        tr>
        <tr>
            <th>语文th>
            <th>数学th>
            <th>英语th>
        tr>
        <tr>
            <td>1td>
            <td>2016001td>
            <td>张三td>
            <td>男td>
            <td>13td>
            <td>85td>
            <td>94td>
            <td>77td>
        tr>
        <tr>
            <td>2td>
            <td>2016002td>
            <td>李四td>
            <td>女td>
            <td>12td>
            <td>96td>
            <td>84td>
            <td>89td>
        tr>
    table>
    <a>导出表格a>
    <script>
        // 使用outerHTML属性获取整个table元素的HTML代码（包括标签），然后包装成一个完整的HTML文档，设置charset为urf-8以防止中文乱码var html =""+ document.getElementsByTagName("table")[0].outerHTML +"";
        // 实例化一个Blob对象，其构造函数的第一个参数是包含文件内容的数组，第二个参数是包含文件类型属性的对象var blob =new Blob([html], { type: "application/vnd.ms-excel" });
        var a = document.getElementsByTagName("a")[0];
        // 利用URL.createObjectURL()方法为a元素生成blob URL        a.href = URL.createObjectURL(blob);
        // 设置文件名        a.download ="学生成绩表.xls";
    script>
body>
html>
效果如图所示：
.body 引用 excel 当前内容_.body 引用 excel 当前内容
.body 引用 excel 当前内容
打开下载的文件：
.body 引用 excel 当前内容_.body 引用 excel 当前内容
.body 引用 excel 当前内容
使用开发人员工具检查a元素，您可以大致了解blob URL的工作原理：
.body 引用 excel 当前内容_.body 引用 excel 当前内容
<a href="blob:http://localhost:52347/0ead79dc-1896-4a53-b1f1-dfbafff4e953" download="学生成绩表.xls">导出表格a>
如果要通过按钮导出文件，则可以在按钮的click事件中创建一个元素，配置其属性并触发其click事件。但是，在FireFox中，需要首先将创建的元素放在主体中，否则无法下载。

					

本文来自电脑杂谈，转载请注明本文网址：
http://www.pc-fly.com/a/shumachanpin/article-327763-1.html

				
				
    
				
    
				
			
		
		
		
    
			
    相关阅读
    
			
    
				
      
			
      
		
      

		
      
	
      发表评论　　请自觉遵守互联网相关的政策法规，严禁发布、暴力、反动的言论
      
	
      
		
		



 
	
      
	
	
      
	

      
	
	
      
  		
      
			
      每日福利
      
			
      
				
      
					越狱后安装软件：如何在iPhone越狱后下载和安装软件越狱后安装软件：如何在iPhone越狱后下载和安装软件
2020年最新的索尼单电/微单WiFi相机数码相机大全2020年最新的索尼单电/微单WiFi相机数码相机大全
猎豹抢票软件手机版将于11月26日正式开售
猎豹抢票软件手机版将于11月26日正式开售

如果计算机无法识别U盘怎么办如果计算机无法识别U盘怎么办

				
      
			
      
		
      
 		
      
			
      热点图片
      
			
      
				
      拼命载入中...
      
				
      
				
      
			
      
			
			
		
      
 		
      
			
      热点排行