解决bootstrap table的export扩展模块利用tableExport导出pdf中文乱码问题
缘由：没有积分了，怎么破？自己研究。
参考文章：
- https://blog.csdn.net/qq_34117170/article/details/72765646
- https://www.cnblogs.com/xrab/p/7210588.html
- https://www.npmjs.com/package/grunt-dump-dir
- https://www.cnblogs.com/s313139232/p/7545114.html
bootstrap-table（1.12.1）中的export扩展模块默认使用jsPDF实现导出pdf，但是jsPDF会出现中文乱码问题。因此查阅一番资料，都提议使用pdfmake来实现pdf导出。但是pdfmake默认使用的字体js文件却又不支持中文。因此需要修改pdfmake源码来支持中文字体。具体做法就是编译新的vfs_fonts.js代替原来vfs_fonts.js文件引入到前端页面中。
上述两个文章讲利用grunt或者glup来生成js。看了下文章然后打算亲自利用grunt来生成js文件。但按照文章1生成的方法来实现，发现里面还是漏了最重要的一步，也就是grunt执行所需要的Gruntfile.js、package.json。这两个东西都是通过grunt官方英文文档学习后，才知道要这两个文件。必须有这两个文件才能正确执行npm中gurnt命令。但是里面涉及一个grunt-dump-dir的依赖。然后问题来了，网上几乎没有这个依赖的操作说明，只查到文章3。然后自己摸索后，勉强写出来Gruntfile.js。但经过实际运行，不知为啥，执行成功后，在build目录下没有生成出js。百般尝试无奈放弃了手动生成js文件的念头。最后在不懈的查找下，找到了一个网址提供方正姚体的vfs_fonts.js（体积小，比微软雅黑要小）。
附上相关代码：
Gruntfile.js
module.exports = function(grunt) {
// Project configuration.
/*grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
uglify: {
options: {
banner: ''
},
build: {
src: 'src/微软雅黑.ttf',
dest: 'build/aa.js'
}
}
});
// 加载包含 "uglify" 任务的插件。
grunt.loadNpmTasks('grunt-contrib-uglify');
// 默认被执行的任务列表。
grunt.registerTask('default', ['uglify']);*/
grunt.loadNpmTasks('grunt-dump-dir');
grunt.registerTask('default', ['dump_dir']);
grunt.initConfig({
dump_dir: {
options: {
'rootPath': 'src/'
},
files: {
'dest.js': [ 'src/*' ]
},
}
});
};package.json
{
"name": "my-project-name",
"version": "0.1.0",
"devDependencies": {
"grunt": "^0.4.5",
"grunt-contrib-jshint": "^0.10.0",
"grunt-contrib-nodeunit": "~0.4.1",
"grunt-contrib-uglify": "^0.5.1",
"grunt-dump-dir": "^0.1.2"
}
}
在解决字体js文件后，就需要修改bootstrap-table中export.js和tableExport.js的源码了。
初始化js
$("#tableId").bootstrapTable({
method: "get", //使用get请求到服务器获取数据
url: "/xxx/listData", //获取数据的地址
contentType:"application/json",
dataType: "json",
locale: "zh-US",
showExport: true, //【export配置】是否显示导出
buttonsAlign:"right", //【export配置】按钮位置
exportDataType: "all", //【export配置】导出数据类型, support: 'basic', 'all', 'selected'.
exportTypes:['json', 'xml', 'png', 'csv', 'txt', 'doc', 'excel', 'pdf'],
//【export配置】导出文件类型,
//support types: 'json', 'xml', 'png', 'csv', 'txt', 'sql', 'doc', 'excel', 'xlsx', 'pdf'.
//default: ['json', 'xml', 'csv', 'txt', 'sql', 'excel']
exportOptions:{ //【export配置】导出设置
//separator: ',',
ignoreColumn: [7], //忽略某一列的索引
fileName: '数据列表', //文件名称设置
worksheetName: 'sheet1', //表格工作区名称
tableName: '数据列表'//,
//pdfFontSize:14,
//pdfLeftMargin:20,
//excelstyles: ['background-color', 'color', 'font-size', 'font-weight'],
/* onMsoNumberFormat: function (cell, row, col) {
var result = "";
if (row > 0 && col == 0)
result = "\\@";
return result;
} */
},
//height: '100%',
singleSelect: false, //单选框
striped: true, //表格显示条纹
pagination: true, //启动分页
pageSize: 10, //每页显示的记录数
pageNumber:1, //当前第几页
pageList:[10, 20, 50, 100],//记录数可选列表
sortable:true,//启动排序
sortName:"name",
sortOrder:"desc",
search: true, //是否启用查询
showColumns: true, //显示下拉框勾选要显示的列
showRefresh: true, //显示刷新按钮
showToggle:true,
toolbar:"#toolbar",
sidePagination: "client", //表示服务端请求
columns: [
{
title: "名称",
field: "name",
width:"10%",
sortable:true,
order:"desc",
cellStyle:{
css:{"overflow":"hidden","text-overflow":"ellipsis","white-space":"nowrap"}//内容过长显示...
}
}
]/*,
//设置为undefined可以获取pageNumber，pageSize，searchText，sortName，sortOrder
//设置为limit可以获取limit, offset, search, sort, order
queryParamsType:"undefined",
queryParams: function queryParams(params) { //设置查询参数
var param = {
pageNumber: params.pageNumber,
pageSize: params.pageSize,
sortOrder: params.sortOrder,
sortName: params.sortName,
searchText: $("#searchText").val()
};
return param;
} ,
onLoadSuccess : function() { //加载成功时执行
alert("加载成功");
},
onLoadError : function() { //加载失败时执行
alert("加载数据失败");
} */
});doExport = function () {
if (!!that.options.exportFooter) {
var data = that.getData();
var $footerRow = that.$tableFooter.find("tr").first();
var footerData = { };
var footerHtml = [];
$.each($footerRow.children(), function (index, footerCell) {
var footerCellHtml = $(footerCell).children(".th-inner").first().html();
footerData[that.columns[index].field] = footerCellHtml == ' ' ? null : footerCellHtml;
// grab footer cell text into cell index-based array
footerHtml.push(footerCellHtml);
});
that.append(footerData);
var $lastTableRow = that.$body.children().last();
$.each($lastTableRow.children(), function (index, lastTableRowCell) {
$(lastTableRowCell).html(footerHtml[index]);
});
}
//修改源码，将jsPdf，改为pdfMake支持中文
var openPdfMake = false;
if(type=="pdf"){
openPdfMake = true;
}
that.$el.tableExport($.extend({}, that.options.exportOptions, {
type: type,
escape: false,
pdfmake:{enabled:openPdfMake}
}));
if (!!that.options.exportFooter) {
that.load(data);
}
}; pdfmake: {
enabled: false, // true: use pdfmake instead of jspdf and jspdf-autotable (experimental)
docDefinition: {
pageOrientation: 'landscape', // 'portrait' or 'landscape'
defaultStyle: {
//font: 'Roboto' // Default is 'Roboto', for arabic font set this option to 'Mirza' and include mirza_fonts.js
font: 'FZYTK' //修改支持PDF中文处理
}
},
fonts: {}
},var docDefinition = {
content: [{
table: {
headerRows: $hrows.length,
widths: widths,
body: body
}
}],
defaultStyle: {//修改支持PDF中文处理
font: 'FZYTK'
}
};pdfMake.fonts = {
Roboto: {
normal: 'Roboto-Regular.ttf',
bold: 'Roboto-Medium.ttf',
italics: 'Roboto-Italic.ttf',
bolditalics: 'Roboto-MediumItalic.ttf'
},
FZYTK: {//修改支持PDF中文处理
normal: 'FZYTK.TTF',
bold: 'FZYTK.TTF',
italics: 'FZYTK.TTF',
bolditalics: 'FZYTK.TTF'
}
};同时还遇到一个问题，window.URL.createObjectURL(data)报错。因此还需修改如下代码：
if ( typeof data === 'object' ) {
window.URL = window.URL || window.webkitURL;
//blobUrl = window.URL.createObjectURL(data);
//修改源码错误
var binaryData = [];
binaryData.push(data);
blobUrl = window.URL.createObjectURL(new Blob(binaryData, {type: "application/zip"}))
DownloadLink.href = blobUrl;
}
else if ( header.toLowerCase().indexOf("base64,") >= 0 )
DownloadLink.href = header + base64encode(data);
else
DownloadLink.href = header + encodeURIComponent(data);https://download.csdn.net/download/envy_l/10510171