js动态导出字符串

示例1: 利用blob动态导出字符串到excel:

<!DOCTYPE html>
< html lang= "en">

< head>
< meta charset= "UTF-8">
< meta name= "viewport" content= "width=device-width, initial-scale=1.0">
< meta http-equiv= "X-UA-Compatible" content= "ie=edge">
< title>Document</ title>
< style media= "screen">
.tableA {
border-collapse: collapse;
}

.tableA .title th {
height: 50 px;
font-size: 24 px;
font-family: '微软雅黑';
font-weight: 700;
}

.tableA tr th {
border: 1 px #000 solid;
height: 40 px;
background: #efefef;
}

.tableA tr td {
padding: 0 40 px;
border: 1 px #000 solid;
height: 40 px;
text-align: center;
}

.tableA .footer td {
font-size: 20 px;
font-weight: 700;
}
</ style>
</ head>

< body>
< table bordercolor= "black" class= "tableA">
< tr class= "title">
< th colspan= "4">学生信息</ th>
</ tr>
< tr>
< th>名字</ th>
< th>性别</ th>
< th>年龄</ th>
< th>班级</ th>
</ tr>
< tr>
< td>小明</ td>
< td>男</ td>
< td>19</ td>
< td>1班</ td>
</ tr>
< tr>
< td>小黄</ td>
< td>男</ td>
< td>20</ td>
< td>2班</ td>
</ tr>
< tr>
< td>老王</ td>
< td>男</ td>
< td>29</ td>
< td>3班</ td>
</ tr>
< tr class= "footer">
< td colspan= "4">总人数:3人</ td>
</ tr>
</ table>

< script>
var oHtml = document. getElementsByClassName( 'tableA')[ 0].outerHTML;
var excelHtml = `
<html>
<head>
<meta charset='utf-8' />
<style>
.tableA {
border-collapse: collapse;
}
.tableA .title th{
height: 50px;
font-size: 24px;
font-family: '微软雅黑';
font-weight: 700;
}
.tableA tr th {
border: 1px #000 solid;
height: 40px;
background: #efefef;
}
.tableA tr td {
padding: 0 40px;
border: 1px #000 solid;
height: 40px;
text-align: center;
}
.tableA .footer td {
font-size: 20px;
font-weight: 700;
}
</style>
</head>
<body>
${oHtml }
</body>
</html>
`;
var debug = { hello: "world" };
// var blob = new Blob([JSON.stringify(debug, null, 2)],
// { type: 'application/json' });
var excelBlob = new Blob([excelHtml], { type: 'application/vnd.ms-excel' })


// 创建一个a标签
var oA = document. createElement( 'a');
// 利用URL.createObjectURL()方法为a元素生成blob URL
oA.href = URL. createObjectURL(excelBlob);
// 给文件命名
oA.download = '学生名单.xls';
// 模拟点击
oA. click();
</ script>
</ body>

</ html>

示例2:

< script>
var content1 = "hhh1";
var content2 = "23332";
var blob = new Blob([content1,content2],{type: "text/plain"});
var url = URL. createObjectURL(blob);

var aEle = document. createElement( "a");
var btn = document. querySelector( "button");

btn. onclick = function ( param) {
aEle.href = url;
aEle.download = "测试下载数据";
aEle. click(); // Dom.click() 模拟一次该dom的点击事件
}
</ script>


注意: DOM.click();     是模拟一次dom 的点击事件。




猜你喜欢

转载自blog.csdn.net/itzhongzi/article/details/79625960