zoukankan      html  css  js  c++  java
  • Js -----后台json数据,前端生成下载text文件

    需要引入

    <script src="/assets/libs/single_file/jquery.min.js"></script>
    <script src="/assets/libs/layer/layer.js"></script>

    借鉴 张鑫旭文章

    http://www.zhangxinxu.com/wordpress/2017/07/js-text-string-download-as-html-json-file/

     1  // 返回错误信息弹框显示
     2     @if (session('point_errors'))
     3         var point_errors = JSON.stringify({!! session()->pull('point_errors') !!});
     4          point_errors = JSON.parse( point_errors );
     5         // console.log(point_errors);
     6         var text_content = '',msg = '',layer_content = '<p><input type="button" id="download_text" value="点击下载文件"></p>';
     7         $.each(point_errors, function(index, item) {
     8             // 组织text内容
     9             text_content += item[0] + ' ' + item[1] + ' ----'
    10                 + item[2] + '
    ';
    11 
    12             msg = '<p style="padding:0;margin:0">'+item[1] + '['
    13                 +  item[0] + ']----'
    14                 +  item[2] + '</p>';
    15             layer_content += msg;
    16         });
    17 
    18         console.log(layer_content);
    19         console.log(text_content);
    20 
    21         // 下载文件方法
    22         var funDownload = function (content, filename) {
    23             var eleLink = document.createElement('a');
    24             eleLink.download = filename;
    25             eleLink.style.display = 'none';
    26             // 字符内容转变成blob地址
    27             var blob = new Blob([content]);
    28             eleLink.href = URL.createObjectURL(blob);
    29             // 触发点击
    30             document.body.appendChild(eleLink);
    31             eleLink.click();
    32             // 然后移除
    33             document.body.removeChild(eleLink);
    34         };
    35 
    36         if ('download' in document.createElement('a')) {
    37             // 作为test.html文件下载
    38             $(document).on('click', '#download_text', function () {
    39                 funDownload(text_content, '导入失败的用户信息.text');
    40             });
    41         } else {
    42             $(document).on('click', '#download_text', function () {
    43                 alert('浏览器不支持');
    44             });
    45         }
    46 
    47         setTimeout(function(){
    48             layer.open({
    49                 type: 1,
    50                 area: ['500px', '600px'],
    51                 content: layer_content,
    52                 scrollbar: true
    53             });
    54         }, 2000);
    55     @endif

  • 相关阅读:
    为MySQL的root用户设定密码
    Sublime Text 3安装Package Control失败
    从系统关机后主机仍在运行
    如何判断一个数是否是质数?
    python之lambda函数
    yum的一些命令使用方法
    NopCommerce架构分析-数据持久层
    NopCommerce架构分析-Cache的应用
    NopCommerce架构分析-源码结构和架构
    下载图片
  • 原文地址:https://www.cnblogs.com/smallyi/p/7569055.html
Copyright © 2011-2022 走看看