首頁 > web前端 > js教程 > js實作動態導出字串方法

js實作動態導出字串方法

小云云
發布: 2018-03-20 17:13:54
原創
1288 人瀏覽過

本文主要跟大家分享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: &#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>
登入後複製

範例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中字串的屬性與方法

JavaScript中字串常用操作方法詳解

JavaScript的字串怎麼使用

#

以上是js實作動態導出字串方法的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板