zoukankan      html  css  js  c++  java
  • JSON导出CSV中文乱码解决方案


    前言

          以往datagrid导出数据全部在后台搞定,现在就想换中思路去解决,正常情况下使用easyui datagrid ajax获取数据源时都是json格式,那么此时需要导出数据时只要把该数据源扔出来直接导出CSV即可。

    中文乱码

         导出CSV后,字母和数字正常,中文成了乱码,一番google发现,有人提出用BOM的方式解决,主要是在导出路径添加后缀 uFEFF

    导出方法

    复制代码
     1 function JSONToCSVConvertor(JSONData, ReportTitle, ShowLabel) {
     2             //If JSONData is not an object then JSON.parse will parse the JSON string in an Object
     3             var arrData = typeof JSONData != 'object' ? JSON.parse(JSONData) : JSONData;
     4 
     5             var CSV = '';
     6             //Set Report title in first row or line
     7 
     8             CSV += ReportTitle + '
    
    ';
     9 
    10             //This condition will generate the Label/Header
    11             if (ShowLabel) {
    12                 var row = "";
    13 
    14                 //This loop will extract the label from 1st index of on array
    15                 for (var index in arrData[0]) {
    16 
    17                     //Now convert each value to string and comma-seprated
    18                     row += index + ',';
    19                 }
    20 
    21                 row = row.slice(0, -1);
    22 
    23                 //append Label row with line break
    24                 CSV += row + '
    ';
    25             }
    26 
    27             //1st loop is to extract each row
    28             for (var i = 0; i < arrData.length; i++) {
    29                 var row = "";
    30 
    31                 //2nd loop will extract each column and convert it in string comma-seprated
    32                 for (var index in arrData[i]) {
    33                     row += '"' + arrData[i][index] + '",';
    34                 }
    35 
    36                 row.slice(0, row.length - 1);
    37 
    38                 //add a line break after each row
    39                 CSV += row + '
    ';
    40             }
    41 
    42             if (CSV == '') {
    43                 alert("Invalid data");
    44                 return;
    45             }
    46 
    47             //Generate a file name
    48             var fileName = "";
    49             //this will remove the blank-spaces from the title and replace it with an underscore
    50             fileName += ReportTitle.replace(/ /g, "_");
    51 
    52             //Initialize file format you want csv or xls
    53             var uri = 'data:text/csv;charset=utf-8,uFEFF' + encodeURI(CSV);
    54 
    55             // Now the little tricky part.
    56             // you can use either>> window.open(uri);
    57             // but this will not work in some browsers
    58             // or you will not get the correct file extension    
    59 
    60             //this trick will generate a temp <a /> tag
    61             var link = document.createElement("a");
    62             link.href = uri;
    63 
    64             //set the visibility hidden so it will not effect on your web-layout
    65             link.style = "visibility:hidden";
    66             link.download = fileName + ".csv";
    67 
    68             //this part will append the anchor tag and remove it after automatic click
    69             document.body.appendChild(link);
    70             link.click();
    71             document.body.removeChild(link);
    72         }
    复制代码
  • 相关阅读:
    全局获取Context
    下拉刷新 SwipeRefreshLayout
    更高级的ToolBar使用----AppBarLayout
    卡片布局CardView
    Design Support的CoordinatorLayout布局
    悬浮按钮FloatingActionButton
    继续滑动菜单的完善,NavigationView,图片圆形化-CircleImageView
    修改电脑hosts文件
    Activity生命周期和启动模式
    活动的基本用法
  • 原文地址:https://www.cnblogs.com/hzcya1995/p/13317740.html
Copyright © 2011-2022 走看看