您正在使用IPV4(18.205.176.39)访问本站 您本次共访问本站 1 次
 用户名: 密 码: 验证码:     用QQ登录本站
首页 软件 编程 笑话 知识 公告 台风 日历 计算器
[公益]文明驾车我带头,文明行路我带头,礼貌让座我带头       深圳小产权房      

【腾讯云】热门云产品首单特惠秒杀,2核2G云服务器45元/年      
[公益] 节省一分零钱 献出一份爱心 温暖世间真情      
2022年 儿童节 15
2022年 端午节 17
2023年 元 旦 229
2023年 春 节 250
 
本类新增
本类热门文章
您现在的位置:首页 >> 脚本程序 >> 内容
JS实现导出Excel和CSV文件操作
内容摘要: 一、js导出Excelhtmlhead/headbodyscripttype='text/javascript'src='./xlsx.core.min.js'/scriptscripttype='text/javascript'/***通用的打开下载对话框方法,没有测试过具体兼容性*@paramurl下载地址,也可以是一个blob对象,必[email protected].....
一、js导出Excel

<html>

<head>

</head>

<body>

<scripttype="text/javascript"src="./xlsx.core.min.js"></script>

<scripttype="text/javascript">

/**

*通用的打开下载对话框方法,没有测试过具体兼容性

*@paramurl下载地址,也可以是一个blob对象,必选

[email protected]保存文件名,可选

*/

functionopenDownloadDialog(url,saveName){

if(typeofurl=='object'&&urlinstanceofBlob){

url=URL.createObjectURL(url);//创建blob地址

}

varaLink=document.createElement('a');

aLink.href=url;

aLink.download=saveName||'';//HTML5新增的属性,指定保存文件名,可以不要后缀,注意,file:///模式下不会生效

varevent;

if(window.MouseEvent)event=newMouseEvent('click');

else{

event=document.createEvent('MouseEvents');

event.initMouseEvent('click',true,false,window,0,0,0,0,0,false,false,false,false,0,null);

}

aLink.dispatchEvent(event);

}

//将一个sheet转成最终的excel文件的blob对象,然后利用URL.createObjectURL下载

functionsheet2blob(sheet,sheetName){

sheetName=sheetName||'sheet1';

varworkbook={

SheetNames:[sheetName],

Sheets:{}

};

workbook.Sheets[sheetName]=sheet;

//生成excel的配置项

varwopts={

bookType:'xlsx',//要生成的文件类型

bookSST:false,//是否生成SharedStringTable,官方解释是,如果开启生成速度会下降,但在低版本IOS设备上有更好的兼容性

type:'binary'

};

varwbout=XLSX.write(workbook,wopts);

varblob=newBlob([s2ab(wbout)],{type:"application/octet-stream"});

//字符串转ArrayBuffer

functions2ab(s){

varbuf=newArrayBuffer(s.length);

varview=newUint8Array(buf);

for(vari=0;i!=s.length;++i)view[i]=s.charCodeAt(i)&0xFF;

returnbuf;

}

returnblob;

}

</script>

<scripttype="text/javascript">

varexportDataSource=[{

name:'路人甲',

phone:'123456789',

email:[email protected]'

},{

name:'炮灰乙',

phone:'123456789',

email:[email protected]'

},{

name:'土匪丙',

phone:'123456789',

email:[email protected]'

},{

name:'流氓丁',

phone:'123456789',

email:[email protected]'

},];//导出json数据源

functionexportExcel(){

varexcelItems=[];

for(leti=0;i<exportDataSource.length;i++){

if(exportDataSource[i].name!=""){

excelItems.push({

"姓名":exportDataSource[i].name,

"电话":exportDataSource[i].phone,

"邮箱":exportDataSource[i].email

});//属性

}

}

varsheet=XLSX.utils.json_to_sheet(excelItems);

openDownloadDialog(sheet2blob(sheet),'exportdata.xlsx');

}

</script>

<astyle="float:right;"onclick="exportExcel()">导出下载</a>

</body>

</html>

二、js实现json导出csv

<html>

<head>

<pstyle="font-size:20px;color:red;">使用a标签方式将json导出csv文件</p>

<buttononclick='tableToExcel()'>导出</button>

</head>

<body>

<script>

functiontableToExcel(){

//要导出的json数据

constjsonData=[

{

name:'路人甲',

phone:'123456789',

email:[email protected]'

},

{

name:'炮灰乙',

phone:'123456789',

email:[email protected]'

},

{

name:'土匪丙',

phone:'123456789',

email:[email protected]'

},

{

name:'流氓丁',

phone:'123456789',

email:[email protected]'

},

]

//列标题,逗号隔开,每一个逗号就是隔开一个单元格

letstr=`姓名,电话,邮箱\n`;

//增加\t为了不让表格显示科学计数法或者其他格式

for(leti=0;i<jsonData.length;i++){

for(letiteminjsonData[i]){

str+=`${jsonData[i][item]+'\t'},`;

}

str+='\n';

}

//encodeURIComponent解决中文乱码

leturi='data:text/csv;charset=utf-8,\ufeff'+encodeURIComponent(str);

//通过创建a标签实现

letlink=document.createElement("a");

link.href=uri;

//对下载的文件命名

link.download="json数据表.csv";

document.body.appendChild(link);

link.click();

document.body.removeChild(link);

}

</script>

</body>

</html>

三、js实现json导出csv

<html>

<head>

<pstyle="font-size:20px;color:red;">使用table标签方式将json导出xls文件</p>

<buttononclick='tableToExcel()'>导出</button>

</head>

<body>

<script>

functiontableToExcel(){

//要导出的json数据

constjsonData=[

{

name:'路人甲',

phone:'123456',

email:[email protected]'

},

{

name:'炮灰乙',

phone:'123456',

email:[email protected]'

},

{

name:'土匪丙',

phone:'123456',

email:[email protected]'

},

{

name:'流氓丁',

phone:'123456',

email:[email protected]'

},

]

//列标题

letstr='<tr><td>姓名</td><td>电话</td><td>邮箱</td></tr>';

//循环遍历,每行加入tr标签,每个单元格加td标签

for(leti=0;i<jsonData.length;i++){

str+='<tr>';

for(letiteminjsonData[i]){

//增加\t为了不让表格显示科学计数法或者其他格式

str+=`<td>${jsonData[i][item]+'\t'}</td>`;

}

str+='</tr>';

}

//Worksheet名

letworksheet='Sheet1'

leturi='data:application/vnd.ms-excel;base64,';

//下载的表格模板数据

lettemplate=`<htmlxmlns:o="urn:schemas-microsoft-com:office:office"

xmlns:x="urn:schemas-microsoft-com:office:excel"

xmlns="http://www.w3.org/TR/REC-html40">

<head><!--[ifgtemso9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet>

<x:Name>${worksheet}</x:Name>

<x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet>

</x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]-->

</head><body><table>${str}</table></body></html>`;

//下载模板

window.location.href=uri+base64(template)

}

//输出base64编码

functionbase64(s){returnwindow.btoa(unescape(encodeURIComponent(s)))}

</script>

</body>

</html>

四、js实现Tab转为Excel

<!DOCTYPEhtml>

<htmllang="en">

<head>

<metacharset="UTF-8">

<metaname="viewport"content="width=device-width,initial-scale=1.0">

<metahttp-equiv="X-UA-Compatible"content="ie=edge">

<title>excel导出测试</title>

<style>

table{

border-collapse:collapse;

text-align:center;

vertical-align:middle;

width:800px;

font-size:20px;

}

button{

height:30px;

width:100px;

margin:20px20px;

background:yellowgreen;

border-radius:10px;

outline:none;

}

input{

height:30px;

padding-left:10px;

margin:10px;

}

</style>

</head>

<body>

<divid="wrap"style="width:900px;margin:20pxauto;">

<h3>js脚本导出excel测试</h3>

<tableid="tb"border="1"cellspacing="0"cellpadding="0">

<thead>

<tr>

<th>ID</th>

<th>姓名</td>

<th>年龄</td>

<th>座右铭</th>

</tr>

</thead>

<tbody>

<tr>

<td>1</td>

<td>张三</td>

<td>18</td>

<td>走的人多了,变成了路。</td>

</tr>

<tr>

<td>2</td>

<td>李四</td>

<td>88</td>

<td>人人都有自己走的路,哪条属于自己呢?</td>

</tr>

<tr>

<td>3</td>

<td>王五</td>

<td>81</td>

<td>走别人的路,让他没道可走!</td>

</tr>

</tbody>

</table>

<label>

姓名:<inputtype="text"autocompleteid="name"placeholder="请输入您的姓名...">

</label>

<label>

年龄:<inputtype="text"autocompleteid="age"placeholder="请输入您的年龄...">

</label>

<label>

座右铭:<inputtype="text"autocompleteid="sex"placeholder="请输入您的座右铭...">

</label>

<buttonid="add">添加信息</button>

<buttonid="out"onclick="btn_export()">导出文件</button>

</div>

<scriptsrc="./xlsx.core.min.js"></script>

<scriptsrc="./jquery.min.js"></script>

<scriptsrc="./excel.js"></script>

<script>

functionbtn_export(){

vartable=document.querySelector("#tb");

varsheet=XLSX.utils.table_to_sheet(table);//将一个table对象转换成一个sheet对象

openDownloadDialog(sheet2blob(sheet),'excel.xlsx');

}

varid=$("input").length+1;

$(function(){

$("#add").click(function(){

varname=$("#name").val();

varage=$("#age").val();

varsex=$("#sex").val();

$("tbody").append("<tr><td>"+id+"</td><td>"+name+"</td><td>"+age+"</td><td>"+sex+"</td></tr>");

id++;

$("input").val('');

});

})

</script>

</body>

</html>

上一篇:python数据写入Excel文件中的实 下一篇:css如何设置不可点击的实现方法
发布日期:2022/5/6
手机扫二维码直达本页
发布时间:14:19:37
点击:152
录入:壹家怡园
相关文章
Baidu

YiJiaCMS 6.2.1.220509(MSSQL) 闽ICP备05000814号-1
本空间由腾讯云(轻量应用服务器)提供,百度云加速提供加速防护
Copyright©2000-2022