解決bootstrap table的export擴充套件模組利用tableExport匯出pdf中文亂碼問題
阿新 • • 發佈：2019-02-09
緣由：沒有積分了，怎麼破？自己研究。
參考文章：
- 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);