项目中用到导出配置,本来说是由前台来做的,所以查了相关资料,试了好几种方案,比如:
html
<div class="b-2" style="margin-left: 100px;" id="exportParams">
<a data-type="json" href="javascript:;" ng-click="dataToTxt()">导出</a>
</div>
js
$scope.configParams = "";
//导出
$scope.paramExport = function(){
Device.getOutputDevConfig(null,{
success: function (param) {
$scope.configParams = param.config;
console.log(param.config);
$scope.export_add('exportParams', $scope.configParams);
},
fail:function (resp){
},
error:function (resp){
}
});
}
//点击a链接
$scope.dataToTxt = function(){
$scope.paramExport();
}
$scope.ev_click = function(obj){
var ev = document.createEvent("MouseEvents");
ev.initMouseEvent("click", true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
obj.dispatchEvent(ev);
}
$scope.export_add = function(name, data){
var urlObject = window.URL || window.webkitURL || window;
var export_blob = new Blob([data]);
var save_link = document.createElementNS("http://www.w3.org/1999/xhtml", "a")
save_link.href = urlObject.createObjectURL(export_blob);
save_link.download = name;
$scope.ev_click(save_link);
}
采用这种方案,调试在Firefox,chorme,搜狗,360等浏览器上,均可正常导出,但是在IE上无论是Edge,IE10,9,8..均不能正常下载导出,坑爹啊>~<,尝试N种方式….(ie对此也太不友好了吧!!!)关于对待ie的兼容真是一条漫漫长路啊,(os:我是非常不情愿的…)
其实这真的是一个很常见的功能,可是感觉网上查到的资料竟然非常之少…
如果小伙伴们有更好的方式,请Call我.
因为项目比较紧,没有留给我太多的时间做这个,最终还是后台给了我一个Url接口地址(手动捂脸…,感谢不杀之恩,救我于水深火热之中)
确实感觉简单多了,还传了个参数sessionId
$scope.dataToTxt = function(){
var sessionId =parseInt(sessionStorage.getItem("sessionId"))||0;
var url ="/cgi-bin/export.cgi", //这是接口地址
form = $('<form action="'+url+'" method="GET" target="_blank"></form>');
form.append($("<input></input>").attr('type', 'hidden')
.attr('name', 'sessionId' ) //添加参数sessionId
.attr('value', sessionId)); //对应的值
$('body').append(form);
form.submit(); //提交表单
}
后续,有时间还是会继续思考前台导出的…
未完~
参考文档:
https://developer.mozilla.org/zh-CN/docs/Web/API/MouseEvent/initMouseEvent
http://scarletsky.github.io/2016/07/03/download-file-using-javascript/