Maison >interface Web >js tutoriel >js implémente la méthode de chaîne d'exportation dynamique

js implémente la méthode de chaîne d'exportation dynamique

小云云original: 2018-03-20 17:13:541295parcourir

Cet article partage principalement avec vous la méthode d'exportation dynamique de chaînes en js. J'espère qu'il pourra vous aider.

Exemple 1 : Utilisez blob pour exporter dynamiquement des chaînes vers 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: &#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>

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

Remarque : DOM.click(); événement de clic dom.

Recommandations associées :

Propriétés et méthodes communes des chaînes en JS

Explication détaillée des opérations de chaîne couramment utilisées en JavaScript

Comment utiliser les chaînes JavaScript

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Exemple de méthode pour implémenter un événement glisser-déposer dans jsArticle suivant：Exemple de méthode pour implémenter un événement glisser-déposer dans js

Articles Liés

Voir plus