Heim > Artikel > Web-Frontend > js implementiert die dynamische Export-String-Methode

js implementiert die dynamische Export-String-Methode

小云云Original: 2018-03-20 17:13:541256Durchsuche

Dieser Artikel zeigt Ihnen hauptsächlich die Methode zum dynamischen Exportieren von Zeichenfolgen in js. Ich hoffe, er kann Ihnen helfen.

Beispiel 1: Verwenden Sie Blob, um Zeichenfolgen dynamisch nach Excel zu exportieren:

<!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: &#39;微软雅黑&#39;;
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(&#39;tableA&#39;)[0].outerHTML;
var excelHtml = `
                       <html>
                       <head>
                           <meta charset=&#39;utf-8&#39; />
                           <style>
                           .tableA {
                               border-collapse: collapse;
                           }
                           .tableA .title th{
                               height: 50px;
                               font-size: 24px;
                               font-family: &#39;微软雅黑&#39;;
                               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: &#39;application/json&#39; });
var excelBlob = new Blob([excelHtml], { type: &#39;application/vnd.ms-excel&#39; })


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

</html>

Beispiel 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>

Hinweis: DOM.click(); wird einmal simuliert Dom-Click-Ereignis.

Verwandte Empfehlungen:

Gemeinsame Eigenschaften und Methoden von Strings in JS

Detaillierte Erläuterung häufig verwendeter String-Operationen in JavaScript

So verwenden Sie JavaScript-Strings

Das obige ist der detaillierte Inhalt vonjs implementiert die dynamische Export-String-Methode. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Beispiel einer Methode zum Implementieren eines Drag-and-Drop-Ereignisses in jsNächster Artikel：Beispiel einer Methode zum Implementieren eines Drag-and-Drop-Ereignisses in js

In Verbindung stehende Artikel

Mehr sehen