This article mainly shares with you the method of dynamically exporting strings in js. I hope it can help you.
Example 1: Use blob to dynamically export strings to 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>
Example 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>
Note: DOM.click(); is to simulate a dom click event .
Related recommendations:
Common properties and methods of strings in JS
Detailed explanation of common string operation methods in JavaScript
The above is the detailed content of js implements dynamic export string method. For more information, please follow other related articles on the PHP Chinese website!