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] + ‘\r\n‘;
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

时间: 2024-10-12 12:49:24

Js -----后台json数据,前端生成下载text文件的相关文章

MVC客户端使用 Mustache.js把json数据填充到模版中

使用Mustache的好处是:可以把一些反复用到的html部分定义成Mustache模版,以便多次使用.使用Mustache的大致步骤是: →从后台拿到json数据 →获取前台页面预先定义好Mustache模版(占位符必须和从后台传来的的字段或属性名一致) →遍历每行的json数据,使用Mustache.render(template, row)方法把json数据填充到对应的占位符,得到html内容 →把html内容追加到页面的某个位置 显示一个足球俱乐部的下拉框: 当点击下拉框,显示该俱乐部的

JSON数据的生成与解析

JSON数据的生成与解析,首先先到网上下载一个json jar包,我用的是org.json 示例代码: package json; import org.json.JSONArray; import org.json.JSONObject; public class Main { /** * 生成Json数据 */ public static String createJson(){ JSONObject json = new JSONObject(); json.put("classId&qu

JS解析Json 数据并跳转到一个新页面,取消A 标签跳转

JS解析Json 数据并跳转到一个新页面,代码如下 $.getJSON("http://api.cn.abb.com/common/api/staff/employee/" + obj.id, function (result) { window.open("https://abb-my.sharepoint.com/_layouts/15/me.aspx?p=" + result.Email, "_blank") }); 取消A 标签跳转 &l

JS解析json数据并将json字符串转化为数组的实现方法

json数据在ajax实现异步交互时起到了很重要的作用,他可以返回请求的数据,然后利用客户端的js进行解析,这一点体现出js的强大,本文介绍JS解析json数据并将json字符串转化为数组的实现方法,需要了解的朋友可以参考下 复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document

jQuery通过ajax获得后台json数据给form表单赋值

jQuery提供了load方法可以将数据加载到页面form表单中,但有时候我需要获取后台json数据中某个值时,又需要赋值整个form表单,load方法没有回调函数所以就不行了,如果用ajax调用的话,获得后台json数据后把json数据分析出来在一个个的赋值到form表单的每个文本框中,这样未免太过复杂和太多代码,所以我根据了一些大神的回答,总结了一个很好用的jQuery函数. jQuery-load方法调用: $('#form').form('load',URL); 页面表单: <span

java对象转JSON JS取JSON数据

JsonConfig config = new JsonConfig(); config.setJsonPropertyFilter(new PropertyFilter() { @Override public boolean apply(Object arg0, String arg1, Object arg2) { // 过滤掉对象里的包含自己的属性(自己关联自己) if (arg1.equals("wareTypes") || arg1.equals("skillS&

利用在线工具根据JSon数据自动生成对应的Java实体类

如果你希望根据JSon数据自动生成对应的Java实体类,并且希望能进行变量的重命名,那么“JSON To Java”一定适合你.(下面的地址需要FQ) https://jsontojava.appspot.com/ 简单快速有效,适合追求效率的你.

js声明json数据,打印json数据

1.js声明json数据: 2.打印json数据. //声明JSON var json = {}; json.a = 1; //第一种赋值方式(仿对象型) json['b'] = 2; //第二种赋值方式(仿数组型) //打印JSON //打印JSON需要用到JSON(JS自带)的一个对象方法stringify //语法如下 alert(JSON.stringify(json)); 总结,在JS里面使用JSON的表现能力比数组优秀.

js里面Json数据的操作

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式,采用完全独立于语言的文本格式.博主记得几年前在华为外包项目中有一个和Android应用交互的需求,Android调用C#的Webservice的接口,就是通过Json这种格式来传递数据的.就是因为这种完全独立于语言的数据格式,所以在系统的前后台被广泛使用.本篇用来记录下前端JS以及后端C#里面JSON的一些常用的操作方法.笔记笔记,好记性不如多笔记~~ JS前端JSON操作: 一.Json数据转字符串: