由于最近項目有一個導出表格為pdf格式，所以就做了這個功能。由于項目的表格是基于bootstrap和bootstrap table實現的，相對于easyUI來說它的優(yōu)點是更方便，更好兼容。
從代碼可以發(fā)現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
注：本文為原創(chuàng)，轉載請注明出處。
