js实现动态导出字符串方法

来源：动视网责编：小采时间：2020-11-27 19:58:50

js实现动态导出字符串方法

js实现动态导出字符串方法:本文主要和大家分享js实现动态导出字符串方法，希望能帮助到大家。示例1：利用blob动态导出字符串到excel：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"

推荐度：

点击下载本文 文档为doc格式

导读js实现动态导出字符串方法:本文主要和大家分享js实现动态导出字符串方法，希望能帮助到大家。示例1：利用blob动态导出字符串到excel：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"

本文主要和大家分享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: 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>
<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 的点击事件。

js实现动态导出字符串方法

推荐度：

点击下载本文 文档为doc格式

标签：方法动态实现

热门焦点

js实现动态导出字符串方法

js实现动态导出字符串方法

js实现动态导出字符串方法

最新推荐

猜你喜欢

热门推荐