WebBuilder 中使用 Vue。
vue2 使用样例
ide.xwl和home.xwl中引入vue.js element
Wb.apply(app, {
/**
* 初始化,渲染到panel设置的html模板中。
*/
init: function() {
var Main = {
data: function() {
return {
// 筛选条件有:按月,按季度,按年,船公司(多选)、客户(多选)、数据来源(订舱、出运),业务类型,不显示加拼,计算单位(票数,箱量)
search: {
serviceType: "1",
typeData: "1",
dateRange: []
},
dialogTableVisible: false,
tableColumn: tableColumn,
tableData: []
};
},
created: function() {
this.init();
},
methods: {
//...
},
computed: {
//...
}
};
var V = Vue.extend(Main);
app.table = new V().$mount(app.tablepanel.el.down('[itemId=tableCntrAccouted]', true));
}
});<div itemId = "tableCntrAccouted"></div>viewport 中执行 app.init();
base64传到前端下载
var contentType = "data:application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;base64";//excel样例
var b64Data = res.responseText;
var blob = that.b64toBlob(b64Data, contentType);
var blobUrl = URL.createObjectURL(blob);
var link = document.createElement('a');
link.href = blobUrl;
link.download = "data.xlsx";
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
// 释放 URL.createObjectURL() 创建的 URL 对象
window.URL.revokeObjectURL(link.href);b64toBlob: function(b64Data, contentType, sliceSize) {
contentType = contentType || '';
sliceSize = sliceSize || 512;
var byteCharacters = atob(decodeURIComponent(b64Data));
var byteArrays = [];
for (var offset = 0; offset < byteCharacters.length; offset += sliceSize) {
var slice = byteCharacters.slice(offset, offset + sliceSize);
var byteNumbers = new Array(slice.length);
for (var i = 0; i < slice.length; i++) {
byteNumbers[i] = slice.charCodeAt(i);
}
var byteArray = new Uint8Array(byteNumbers);
byteArrays.push(byteArray);
}
var blob = new Blob(byteArrays, {
type: contentType
});
return blob;
}
},