怎么让tableExport支持中文导出
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了怎么让tableExport支持中文导出相关的知识，希望对你有一定的参考价值。
参考技术A 一、mybase64.js使用方法
//=======编码,type:0 可以省略data = $.base64(data:"需要编码成base64的字符串",type:0);
//=======解码
data = $.base64(data:"已经编码过后的base64",type:1,unicode:false);
//=======让解码后中文不出现乱码的方法
data = $.base64(data:"已经编码过后的base64",type:1,unicode:true);
//=或
data = $.base64(data:"已经编码过后的base64",type:1);
(function ($)
$.base64 = function (options)
var defaults =
data: "",
type: 0,
unicode: true
;
var opts = $.extend(defaults, options);
var keyStr = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";
UnicodeChr = function ()
UnicodeToAnsi = function (chrCode)
var chrHex = chrCode.toString(16);
chrHex = "000" + chrHex.toUpperCase();
chrHex = chrHex.substr(chrHex.length - 4);
var i = UnicodeChr().indexOf(chrHex);
if (i != -1)
chrHex = AnsicodeChr().substr(i, 4);
return parseInt(chrHex, 16)
AnsiToUnicode = function (chrCode)
var chrHex = chrCode.toString(16);
chrHex = "000" + chrHex.toUpperCase();
chrHex = chrHex.substr(chrHex.length - 4);
var i = AnsicodeChr().indexOf(chrHex);
if (i != -1)
chrHex = UnicodeChr().substr(i, 4);
return parseInt(chrHex, 16)
strUnicode2Ansi = function (asContents)
var len1 = asContents.length;
var temp = "";
for (var i = 0; i < len1; i++)
var varasc = asContents.charCodeAt(i);
if (varasc < 0)
varasc += 65536;
if (varasc > 127)
varasc = UnicodeToAnsi(varasc);
if (varasc > 255)
var varlow = varasc & 65280;
varlow = varlow >> 8;
var varhigh = varasc & 255;
temp += String.fromCharCode(varlow) + String.fromCharCode(varhigh);
else
temp += String.fromCharCode(varasc);
return temp;
strAnsi2Unicode = function (asContents)
var len1 = asContents.length;
var temp = "";
var chrcode;
for (var i = 0; i < len1; i++)
var varasc = asContents.charCodeAt(i);
if (varasc > 127)
chrcode = AnsiToUnicode((varasc << 8) + asContents.charCodeAt(++i));
else
chrcode = varasc;
temp += String.fromCharCode(chrcode);
return temp;
encode64 = function (input)
var output = "";
var chr1, chr2, chr3 = "";
var enc1, enc2, enc3, enc4 = "";
var i = 0;
do
chr1 = input.charCodeAt(i++);
chr2 = input.charCodeAt(i++);
chr3 = input.charCodeAt(i++);
enc1 = chr1 >> 2;
enc2 = ((chr1 & 3) << 4) | (chr2 >> 4);
enc3 = ((chr2 & 15) << 2) | (chr3 >> 6);
enc4 = chr3 & 63;
if (isNaN(chr2))
enc3 = enc4 = 64;
else if (isNaN(chr3))
enc4 = 64;
output = output +
keyStr.charAt(enc1) +
keyStr.charAt(enc2) +
keyStr.charAt(enc3) +
keyStr.charAt(enc4);
chr1 = chr2 = chr3 = "";
enc1 = enc2 = enc3 = enc4 = "";
while (i < input.length);
return output;
decode64 = function (input)
var output = "";
var chr1, chr2, chr3 = "";
var enc1, enc2, enc3, enc4 = "";
var i = 0;
if (input.length % 4 != 0)
return "";
var base64test = /[^A-Za-z0-9/+///=]/g;
if (base64test.exec(input))
return "";
do
enc1 = keyStr.indexOf(input.charAt(i++));
enc2 = keyStr.indexOf(input.charAt(i++));
enc3 = keyStr.indexOf(input.charAt(i++));
enc4 = keyStr.indexOf(input.charAt(i++));
chr1 = (enc1 << 2) | (enc2 >> 4);
chr2 = ((enc2 & 15) << 4) | (enc3 >> 2);
chr3 = ((enc3 & 3) << 6) | enc4;
output = output + String.fromCharCode(chr1);
if (enc3 != 64)
output += String.fromCharCode(chr2);
if (enc4 != 64)
output += String.fromCharCode(chr3);
chr1 = chr2 = chr3 = "";
enc1 = enc2 = enc3 = enc4 = "";
while (i < input.length);
return output;
if (opts.data == "")
return false;
else
if (opts.type == 0)
if (opts.unicode == true)
return encode64(strUnicode2Ansi(opts.data));
else
return encode64(opts.data);
else
if (opts.unicode == true)
return strAnsi2Unicode(decode64(opts.data));
else
return decode64(opts.data);
)(jQuery);
二、tableExport.js：
(function($)
$.fn.extend(
tableExport: function(options)
var defaults =
separator: ',',
ignoreColumn: [],
tableName:'yourTableName',
type:'csv',
pdfFontSize:14,
pdfLeftMargin:20,
escape:'true',
htmlContent:'false',
consoleLog:'false'
;
var options = $.extend(defaults, options);
var el = this;
if(defaults.type == 'csv' || defaults.type == 'txt')
// Header
var tdData ="";
$(el).find('thead').find('tr').each(function()
tdData += "\n";
$(this).filter(':visible').find('th').each(function(index,data)
if ($(this).css('display') != 'none')
if(defaults.ignoreColumn.indexOf(index) == -1)
tdData += '"' + parseString($(this)) + '"' + defaults.separator;
);
tdData = $.trim(tdData);
tdData = $.trim(tdData).substring(0, tdData.length -1);
);
// Row vs Column
$(el).find('tbody').find('tr').each(function()
tdData += "\n";
$(this).filter(':visible').find('td').each(function(index,data)
if ($(this).css('display') != 'none')
if(defaults.ignoreColumn.indexOf(index) == -1)
tdData += '"'+ parseString($(this)) + '"'+ defaults.separator;
);
//tdData = $.trim(tdData);
tdData = $.trim(tdData).substring(0, tdData.length -1);
);
//output
if(defaults.consoleLog == 'true')
console.log(tdData);
var base64data = "base64," + $.base64.encode(tdData);
window.open('data:application/'+defaults.type+';filename=exportData;' + base64data);
else if(defaults.type == 'sql')
// Header
var tdData ="INSERT INTO `"+defaults.tableName+"` (";
$(el).find('thead').find('tr').each(function()
$(this).filter(':visible').find('th').each(function(index,data)
if ($(this).css('display') != 'none')
if(defaults.ignoreColumn.indexOf(index) == -1)
tdData += '`' + parseString($(this)) + '`,' ;
);
tdData = $.trim(tdData);
tdData = $.trim(tdData).substring(0, tdData.length -1);
);
tdData += ") VALUES ";
// Row vs Column
$(el).find('tbody').find('tr').each(function()
tdData += "(";
$(this).filter(':visible').find('td').each(function(index,data)
if ($(this).css('display') != 'none')
if(defaults.ignoreColumn.indexOf(index) == -1)
tdData += '"'+ parseString($(this)) + '",';
);
三、引用和导出
1.注意引入jquery.min.js，tableExport.js，mybase64.js；
2.导出 $('#ID').tableExport( type: 'excel', escape: 'false' );
BootstrapTable-导出数据
要导出的数据：https://examples.bootstrap-table.com/json/data1.json?order=asc
使用的插件（注意插件版本依赖）：tableExport.jquery.plugin
代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>TableExport</title> <!--jquery--> <script src="https://cdn.bootcss.com/jquery/3.4.0/jquery.min.js"></script> <!--bootstrap--> <link href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.bootcss.com/popper.js/1.14.7/umd/popper.min.js"></script> <script src="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> <!--fontawesome--> <script src="https://cdn.bootcss.com/font-awesome/5.8.1/js/all.min.js"></script> <!--bootstrap-table--> <link href="https://cdn.bootcss.com/bootstrap-table/1.14.2/bootstrap-table.min.css" rel="stylesheet"> <script src="https://cdn.bootcss.com/bootstrap-table/1.14.2/bootstrap-table.min.js"></script> <!--bootstrap-table-lanuage--> <script src="https://cdn.bootcss.com/bootstrap-table/1.14.2/bootstrap-table-locale-all.min.js"></script> <!--bootstrap-table-export--> <script src="https://cdn.bootcss.com/bootstrap-table/1.14.2/extensions/export/bootstrap-table-export.min.js"></script> <!--在客户端保存生成的导出文件--> <script src="https://cdn.bootcss.com/FileSaver.js/2014-11-29/FileSaver.min.js"></script> <!--以XLSX（Excel 2007+ XML格式）格式导出表（SheetJS）--> <script src="https://cdn.bootcss.com/xlsx/0.14.2/xlsx.core.min.js"></script> <!--以PNG格式导出表格--> <!--对于IE支持包括 html2canvas 之前的 es6-promise--> <script src="https://cdn.bootcss.com/es6-promise/4.1.1/es6-promise.auto.min.js"></script> <script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.min.js"></script> <!--将表导出为PDF文件--> <script src="https://unpkg.com/tableexport.jquery.plugin/libs/jsPDF/jspdf.min.js"></script> <script src="https://unpkg.com/tableexport.jquery.plugin/libs/jsPDF-AutoTable/jspdf.plugin.autotable.js"></script> <!--无论期望的格式如何，最后都包含 tableexport.jquery.plugin（不是tableexport）--> <script src="https://unpkg.com/tableexport.jquery.plugin/tableExport.min.js"></script> </head> <body> <div class="container"> <div id="toolbar"> <select class="form-control"> <option value="">Export Basic</option> <option value="all">Export All</option> <option value="selected">Export Selected</option> </select> </div> <button type="button" onclick="exportData()" class=‘btn btn-mini btn-info‘>导出</button> <table id="table" data-locale="zh-CN"></table> </div> <script> $(function () { $.ajax({ url: "https://examples.bootstrap-table.com/json/data1.json?order=asc", success: function (result) { // 初始化表格 $(‘#toolbar‘).find(‘select‘).change(function () { $(‘#table‘).bootstrapTable(‘destroy‘).bootstrapTable({ data: result, pagination: true,//显示分页 clickToSelect: true,//单击列表选中 toolbar: "#toolbar",//显示工具栏 showToggle: true,//工具栏上显示列表模式切换 showExport: true,//工具栏上显示导出按钮 exportDataType: $(this).val(),//显示导出范围 exportTypes: [‘json‘, ‘xml‘, ‘png‘, ‘csv‘, ‘txt‘, ‘sql‘, ‘doc‘, ‘excel‘, ‘xlsx‘, ‘pdf‘],//导出格式 exportOptions: {//导出设置 fileName: ‘Tablexxx‘,//下载文件名称 }, columns: [ { field: ‘state‘, checkbox: true, visible: $(this).val() === ‘selected‘ }, { field: ‘id‘, title: ‘ID‘ }, { field: ‘name‘, title: ‘Item Name‘ }, { field: ‘price‘, title: ‘Item Price‘ } ] }) }).trigger(‘change‘); } }); }) // 自定义按钮导出数据 function exportData(){ $(‘#table‘).tableExport({ type: ‘excel‘, exportDataType: "all", ignoreColumn: [0],//忽略某一列的索引 fileName: ‘Tablexxx‘,//下载文件名称 onCellHtmlData: function (cell, row, col, data){//处理导出内容,自定义某一行、某一列、某个单元格的内容 console.info(data); return data; }, }); } </script> </body> </html>
结果
bootstrap-table-export：https://bootstrap-table.com/docs/extensions/export/
tableexport.jquery.plugin CDN：https://unpkg.com/tableexport.jquery.plugin/
以上是关于怎么让tableExport支持中文导出的主要内容，如果未能解决你的问题，请参考以下文章