bootstrap table和tableExport导出支持中文的Excel和pdf等表格
程序员文章站
2022-07-15 10:52:26
...
前言
- 由于最近项目有一个导出表格为pdf格式，所以就做了这个功能。由于项目的表格是基于bootstrap和bootstrap table实现的，相对于easyUI来说它的优点是更方便，更好兼容。
-
从代码可以发现bootstrap table本身是没有实现表格的导出的，需要扩展插件tableExport，扩展的tableExport在导出csv，txt，sql，json等格式的时候能很好的支持中文，不过需要导入相应js文件（本文会解决），但是对于pdf格式的就不支持中文了，如何解决是本文的中点。
前提
首先得下载几个插件：
jquery下载
bootstrap下载
bootstrap table下载
tableExport下载
注意
- 由于bootstrap和其扩展的插件都是基于jquery来实现的，所以在使用这些插件的时候必须先把jquery引入。
- 对于版本有要求，bootstrap对jquery的版本有依赖，在bootstrap的bower.json 文件中列出了 bootstrap 所支持的 jquery 版本，请对应下载jquery版本。
- 不能把单个的css、js文件提出来放在一个文件中因为有的文件有关联，提出来就导致某些功能用不了。
步骤 下载的文件整理：
- 新建文件bootstrap_above；
- 将下载的tableExport.jquery.plugin-master文件重命名为tableExport；
- 将重命名的tableExport和下载的bootstrap、bootstrap-table-develop、jquery-1.9.1文件放入bootstrap_above文件中。
- 修改文件，tableExport默认是使用jspdf来实现导出pdf的，但是jspdf不支持中文，所以我们改用pdfmake方式，但是必须自定义字体生成vfs_fonts.js，博主已经自定义好需要的请自己下载。将vfs_fonts.js文件替换掉bootstrap_above\tableExport\libs\pdfmake目录下的vfs_fonts.js文件。
- 将tableExport.js文件的代码
pdfmake: {enabled: false, // true: use pdfmake instead of jspdf and jspdf-autotable (experimental)
docDefinition: {pageOrientation: 'portrait', // 'portrait' or 'landscape'
defaultStyle: {font: 'Roboto' // default is 'Roboto', for arabic font set this option to 'Mirza' and include mirza_fonts.js
}
},
fonts: {}
}, 修改为
pdfmake: {enabled: true},- 将tableExport.js文件的代码
var docDefinition = { content: [ {
table: {
headerRows: $hrows.length,
widths: widths,
body: body
}
}]};
$.extend(true, docDefinition, defaults.pdfmake.docDefinition);
pdfMake.fonts = {
Roboto: {
normal: 'Roboto-Regular.ttf',
bold: 'Roboto-Medium.ttf',
italics: 'Roboto-Italic.ttf',
bolditalics: 'Roboto-MediumItalic.ttf'
}
};
$.extend(true, pdfMake.fonts, defaults.pdfmake.fonts);替换为
pdfMake.fonts = {
Roboto: {
normal: 'Roboto-Regular.ttf',
bold: 'Roboto-Medium.ttf',
italics: 'Roboto-Italic.ttf',
bolditalics: 'Roboto-Italic.ttf'
},
微软雅黑: {
normal: 'msyh.ttf',
bold: 'msyhbd.ttf',
italics: 'msyh.ttf',
bolditalics: 'msyhbd.ttf'
}
};
$.extend(true, pdfMake.fonts, defaults.pdfmake.fonts);
var docDefinition = {
pageOrientation: 'landscape',
content: [
{
table: {
headerRows: $hrows.length,
widths: widths,
body: body
}
}
],
defaultStyle: {
font: '微软雅黑'
}
};
$.extend(true, docDefinition, defaults.pdfmake.docDefinition);
至此前期工作就做好了，接下来就是使用了。
html代码（注意引用js的顺序，部分顺序不能改变）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="icon" href="img/favicon.ico">
<title>Bootstrap 模板</title>
<!--
描述：样式导入
-->
<link rel="stylesheet" href="js/bootstrap_above/bootstrap/css/bootstrap.min.css" />
<link rel="stylesheet" href="js/bootstrap_above/bootstrap-table-develop/dist/bootstrap-table.css"/>
<!--
描述：js导入，注意顺序，jquery必须引入
bootstrap-table-zh-CN.js为表格汉化的文件
FileSaver.min.js等是关联引用文件
-->
<script src="js/bootstrap_above/jquery-1.9.1/jquery.min.js"></script>
<script src="js/bootstrap_above/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/bootstrap_above/bootstrap-table-develop/dist/bootstrap-table.js"></script>
<script type="text/javascript" src="js/bootstrap_above/bootstrap-table-develop/dist/locale/bootstrap-table-zh-CN.js"></script>
<script type="text/javascript" src="js/bootstrap_above/bootstrap-table-develop/dist/extensions/export/bootstrap-table-export.js"></script>
<script src="js/bootstrap_above/tableExport/libs/pdfmake/pdfmake.min.js"></script>
<script src="js/bootstrap_above/tableExport/libs/pdfmake/vfs_fonts.js"></script>
<script type="text/javascript" src="js/bootstrap_above/tableExport/libs/FileSaver/FileSaver.min.js"></script>
<script type="text/javascript" src="js/bootstrap_above/tableExport/libs/jsPDF/jspdf.min.js"></script>
<script type="text/javascript" src="js/bootstrap_above/tableExport/libs/jsPDF-AutoTable/jspdf.plugin.autotable.js"></script>
<script type="text/javascript" src="js/bootstrap_above/tableExport/tableExport.js"></script>
<script src="js/table.js"></script>
</head>
<body>
<table class="table-responsive" id="db_dependences">
</table>
</body>
</html>
js块table.js代码
$(function () {
$('#db_dependences').bootstrapTable({
method:'POST',
dataType:'json',
contentType: "application/x-www-form-urlencoded",
cache: false,
striped: true, //是否显示行间隔色
sidePagination: "client", //分页方式：client客户端分页，server服务端分页（*）
showColumns:true,
pagination:true,
minimumCountColumns:2,
pageNumber:1, //初始化加载第一页，默认第一页
pageSize: 20, //每页的记录行数（*）
pageList: [10, 25, 50, 100], //可供选择的每页的行数（*）
uniqueId: "id", //每一行的唯一标识，一般为主键列
showExport: true,
exportDataType: 'all',
exportTypes:[ 'csv', 'txt', 'sql', 'doc', 'excel', 'xlsx', 'pdf'], //导出文件类型
columns: [{
field: 'id',
title: 'Item ID'
}, {
field: 'name',
title: 'Item Name'
}, {
field: 'price',
title: 'Item Price'
}],
data: [{
id: 1,
name: '项目 1',
price: '价格$1'
}, {
id: 2,
name: '项目 2',
price: '价格$2'
}]
});
});
结果不多说有图才有真相
源码下载
下载链接：ExportPDF_ch
注：本文为原创，转载请注明出处。