js导出文件保存在本地

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

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值