JS实现导出Excel和CSV文件操作

第JS实现导出Excel和CSV文件操作//增加\t为了不让表格显示科学计数法或者其他格式

for(leti=0;ijsonData.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

p使用table标签方式将json导出xls文件/p

button导出/button

/head

body

script

functiontableToExcel(){

//要导出的json数据

constjsonData=[

name:'路人甲',

phone:'123456',

email:'123@123456.com'

name:'炮灰乙',

phone:'123456',

email:'123@123456.com'

name:'土匪丙',

phone:'123456',

email:'123@123456.com'

name:'流氓丁',

phone:'123456',

email:'123@123456.com'

//列标题

letstr='trtd姓名/tdtd电话/tdtd邮箱/td/tr

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

for(leti=0;ijsonData.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="/TR/REC-html40"

head!--[ifgtemso9]xmlx:ExcelWorkbookx:ExcelWorksheetsx:ExcelWorksheet

x:Name${worksheet}/x:Name

x:WorksheetOptionsx:DisplayGridlines//x:WorksheetOptions/x:ExcelWorksheet

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

/headbodytable${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"

titleexcel导出测试/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"

h3js脚本导出excel测试/h3

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

thead

thID/th

th姓名/td

th年龄/td

th座右铭/th

/tr

/thead

tbody

td1/td

td张三/td

td18/td

td走的人多了，变成了路。/td

/tr

td2/td

td李四/td

td88/td

td人人都有自己走的路，哪条属于自己呢？/td

/tr

td3/td

td王五/td

td81/td

td走别人的路，让他没道可走！/td

/tr

/tbody

/table

label

姓名：inputtype="text"autocompleteid="name"placeholder="请输入您的姓名..."

/label

label

年龄：input