极客观点
项目管理
HarmonyOS
我利用axios获取数据及处理后，并想导出到excel文件内，怎么导出是空的呢？
主文件：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
body, html {width: 100%;height: 100%;margin:0;font-family:"微软雅黑";}
#allmap {width: 100%;height:680px;overflow: hidden;margin:0;font-family:"微软雅黑";}
</style>
<script src="js/vue.js"></script>
<script src="js/axios.min.js"></script>
<script src="js/lodash.min.js"></script>
<script type="text/javascript" src="js/JSONToExcelConvertor.js" ></script>
<script type="text/javascript">
function splitJson(a) {
var result = a.split('<hr>');
var r = result.filter(function (s) {
return s && s.trim(); // 注：IE9(不包含IE9)以下的版本没有trim()方法
});
return r;
}
function matchReg(str){
let reg=/<\/?.+?\/?>/g;
return str.replace(reg,'');
}
function purifyHtml(str) {
const div = document.createElement('div');
div.innerHTML = str;
var result = div.innerText.trim();
return result;
}
</script>
<title>toExcel</title>
</head>
<body>
<div id="allmap">
<input type="button" id="wwo" value="导出" @click="output" />
</div>
<script type="text/javascript">
var app = new Vue({
el:'#allmap',
data () {
return {
overviews:[]
}
},
created () {
var self = this;
axios.post('testMssql31.php').then(function (response) {
var json=response.data;
for(var i=0;i<json.length;i++){
var temp = json[i].shenPiYiJian;
var arr = splitJson(temp);
for(var j=0;j<arr.length;j++) {
arr[j]=matchReg(arr[j]);
}
arr=_.reverse(arr);
for(let x=0;x<arr.length;x++){
let t = x + 1;
json[i]['hj'+t] = arr[x].split(" ")[0];
json[i]['time' + t] = arr[x].split(" ")[1];
}
}
self.overviews=json;
})
.catch(function (error) {
console.log(error);
});
},
methods:{
output() {
JSONToExcelConvertor(this.overviews,"report");
}
},
mounted () {
}
})
</script>
</body>
</html>JSONToExcelConvertor.js 文件：
function JSONToExcelConvertor(JSONData, FileName,title,filter) {
if(!JSONData)
return;
//转化json为object
var arrData = typeof JSONData != 'object' ? JSON.parse(JSONData) : JSONData;
var excel = "<table>";
//设置表头
var row = "<tr>";
if(title)
{
//使用标题项
for (var i in title) {
row += "<th align='center'>" + title[i] + '</th>';
}
}
else{
//不使用标题项
for (var i in arrData[0]) {
row += "<th align='center'>" + i + '</th>';
}
}
excel += row + "</tr>";
//设置数据
for (var i = 0; i < arrData.length; i++) {
var row = "<tr>";
for (var index in arrData[i]) {
//判断是否有过滤行
if(filter)
{
if(filter.indexOf(index)==-1)
{
var value = arrData[i][index] == null ? "" : arrData[i][index];
row += '<td>' + value + '</td>';
}
}
else
{
var value = arrData[i][index] == null ? "" : arrData[i][index];
row += "<td align='center'>" + value + "</td>";
}
}
excel += row + "</tr>";
}
excel += "</table>";
var excelFile = "<html xmlns:o='urn:schemas-microsoft-com:office:office' xmlns:x='urn:schemas-microsoft-com:office:excel' xmlns='http://www.w3.org/TR/REC-html40'>";
excelFile += '<meta http-equiv="content-type" content="application/vnd.ms-excel; charset=UTF-8">';
excelFile += '<meta http-equiv="content-type" content="application/vnd.ms-excel';
excelFile += '; charset=UTF-8">';
excelFile += "<head>";
excelFile += "<!--[if gte mso 9]>";
excelFile += "<xml>";
excelFile += "<x:ExcelWorkbook>";
excelFile += "<x:ExcelWorksheets>";
excelFile += "<x:ExcelWorksheet>";
excelFile += "<x:Name>";
excelFile += "{worksheet}";
excelFile += "</x:Name>";
excelFile += "<x:WorksheetOptions>";
excelFile += "<x:DisplayGridlines/>";
excelFile += "</x:WorksheetOptions>";
excelFile += "</x:ExcelWorksheet>";
excelFile += "</x:ExcelWorksheets>";
excelFile += "</x:ExcelWorkbook>";
excelFile += "</xml>";
excelFile += "<![endif]-->";
excelFile += "</head>";
excelFile += "<body>";
excelFile += excel;
excelFile += "</body>";
excelFile += "</html>";
var uri = 'data:application/vnd.ms-excel;charset=utf-8,' + encodeURIComponent(excelFile);
var link = document.createElement("a");
link.href = uri;
link.style = "visibility:hidden";
link.download = FileName + ".xls";
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
这些操作坑太多,推荐使用成熟的框架，https://github.com/SheetJS/js...