解决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("加载数据失败");} */});

bootstrap-table-export.js

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 arrayfooterHtml.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);}};

tableExport.js

 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.jsfont:          '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);elseDownloadLink.href = header + encodeURIComponent(data);

PS：最后通过别人帮助下，下载了微软雅黑的js字体文件。都统一打包在以下的export模块资源文件中了，供大家参考。
https://download.csdn.net/download/envy_l/10510171

解决bootstrap table的export扩展模块利用tableExport导出pdf中文乱码问题相关推荐

怎样将英文html文件转换成中文乱码,解决html导出pdf中文乱码问题的正确姿势
简介 jspdf是歪果仁开发的,因此在一开始就没想过支持非英文以外的文字,这就导致了非英文的文本都是乱码. 因此就有其他大佬给增加了其他解决方案,到了1.5版本也正式加入了非英文支持的解决方案. 解决 ...
html转换pdf中文失败,解决html导出pdf中文乱码问题的正确姿势
简介 jspd页求是解这如前总回随4泉标使幻近面的是,f是歪果仁开发的,因此在一开始就没想过支持非英文以外的文字,这就导致了非英文的文本朋不功事做时次功好来多这开制的请一例农在个屏器随的会满和满时波实 ...
解决Angular Kendo UI 导出PDF中文乱码
在使用 Kendo UI for Angular 的 PDFExportComponent 组件时,如果内容是中文则导出PDF将会出现乱码,网上许多人认为是官方不支持中文,但其实不然,阅读文档 The ...
html转换成pdf后乱码,解决html导出pdf中文乱码问题的正确姿式
简介本文使用jspdf 1.5.3版.GitHub地址:https://github.com/MrRio/jsPDFhtml jspdf是歪果仁开发的,所以在一开始就没想过支持非英文之外的文字,这就 ...
解决pads logic导出pdf中文乱码问题
最近在做<晶体管电路设计-上>配套PCB实验板(用于调试实验,更深入学习模电知识)想导出PDF,选择File->Create Pdf,导出的pdf中文是乱码,即使我把字符设置成宋体等 ...
bootstrap使用tableExport导出pdf时中文乱码问题
前言最近拿到了一个任务,让处理一下公司的系统平台问题.问题就是页面导出PDF文件,有中文的话显示的都是乱码.因为公司的项目都是给国外客户使用的,所以我估计从设计到测试都没有考虑中文的问题.但是为啥现 ...
mysqlcsv导入中文乱码_Mysql 导入导出csv 中文乱码问题的解决方法
导入csv: 复制代码代码如下: load data infile '/test.csv' into table table_name fields terminated by ',' optio ...
csv导入mysql乱码问题,Mysql导入导出csv中文乱码问题的解决方法_MySQL
bitsCN.com 导入csv: load data infile '/test.csv' into table table_name fields terminated by ',' option ...
解决JS在url中传递参数时参数包含中文乱码的问题
解决JS在url中传递参数时参数包含中文乱码的问题参考文章: (1)解决JS在url中传递参数时参数包含中文乱码的问题 (2)https://www.cnblogs.com/xushengguan/ ...

解决bootstrap table的export扩展模块利用tableExport导出pdf中文乱码问题

解决bootstrap table的export扩展模块利用tableExport导出pdf中文乱码问题相关推荐

最新文章

热门文章