js导出文件保存在本地

来源:互联网 发布:angular tooltips.js 编辑:程序博客网 时间:2024/06/04 22:52

项目中用到导出配置,本来说是由前台来做的,所以查了相关资料,试了好几种方案,比如:
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/