本文主要和大家分享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实现动态导出字符串方法的详细内容。更多信息请关注PHP中文网其他相关文章!