實現pdfmake使用中文本體主要就是編譯新的vfs_fonts.js代替原來vfs_fonts.js文檔引入到前端頁面中，為了編譯出新的字體文檔，下列是中文顯示的解決方法，供大家參考：
操作系統：Windows
操作步驟：
1. 安裝node.js
2. 下載pdfmake的源代碼、下載地址https://github.com/bpampuch/pdfmake
3. 在源代碼根目錄下安裝gulp:
打開cmd命令窗口，定位到源代碼根目錄,如：cd V:\pdfmake-master
npm install gulp
npm install -g gulp
npm i -g gulp-cli
執行gulp -v顯示gulp版本號則説明安裝成功
4. 利用gulp打包字體ttf文檔到vfs_fonts.js文檔中
gulp安裝成功後，查看源代碼根目錄下的gulpfile.js，發現gulp編譯還依賴了很多其他的模塊，所以需要一一安裝，沒辦法所以得一一安裝：npm install webpack-stream、npm install gulp-uglify 等等
V:\pdfmake-master>npm i -g gulp-cli
V:\node-v8.12.0-win-x64\gulp -> V:\node-v8.12.0-win-x64\node_modules\gulp-cli\bin\gulp.js
+ gulp-cli@2.0.1
added 235 packages from 147 contributors in 6.71s
V:\pdfmake-master>gulp buildFonts
[13:48:16] Using gulpfile V:\pdfmake-master\gulpfile.js
[13:48:16] Starting 'buildFonts'...
[13:48:17] Finished 'buildFonts' after 382 ms
從本地 C:\Windows\Fonts 下拷貝一箇中文本體到D:\download\chrome\pdfmake-master\examples\fonts目錄下，並刪除fonts目錄下原來的ttf文檔，這裏有一個問題，中文本體都很大，囧。
請選了一個最小的字體上:標楷體-標準 ，這一步完成之後，字體打包生成的vfs_fonts.js會覆蓋源代碼根目錄的build目錄下的vfs_fonts.js文檔，這時需要將vfs_fonts.js拷貝到你的項目當中替換原來的vfs_fonts.js，並引用的html頁面中
以 DataTables 為例
<button onclick="down('pdf文件中文顯示')">PDF下載</button>
<!-- SELECT2 EXAMPLE -->
<div class="box box-danger">
<div class="box-header with-border">
<h3 class="box-title">維護畫面</h3>
<div class="box-tools pull-right">
<button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
<button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-remove"></i></button>
</div>
</div>
<!-- /.box-header -->
<div class="box-body">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="authorityName">Name</label>
<input type="text" class="form-control" id="authorityName" placeholder="Authority Name" name="name">
</div>
<!-- /.form-group -->
<div class="form-group">
<label for="authorityDescription">description</label>
<input type="text" class="form-control" id="authorityDescription" placeholder="Authority Description" name="description">
</div>
<!-- /.form-group -->
</div><!-- /.col -->
</div><!-- /.row -->
</div>
<!-- /.box-body -->
<div class="box-footer">
Visit <a href="/security/authority">Authority</a>
</div>
</div>
<!-- /.box -->
<!-- Default box -->
<div class="box box-info">
<div class="box-header">
<h3 class="box-title">角色清單</h3>
<div class="box-tools pull-right">
<button type="button" class="btn btn-box-tool" data-widget="collapse" data-toggle="tooltip"
title="Collapse">
<i class="fa fa-minus"></i></button>
<button type="button" class="btn btn-box-tool" data-widget="remove" data-toggle="tooltip" title="Remove">
<i class="fa fa-times"></i></button>
</div>
</div>
<div class="box-body">
<table id="tblAuthority" class="table table-bordered table-striped" style="width:100%">
<thead>
<tr>
<th>id</th>
<th>name</th>
<th>description</th>
<th>Options</th>
</tr>
</thead>
<tfoot>
<tr>
<th>id</th>
<th>name</th>
<th>description</th>
<th>Options</th>
</tr>
</tfoot>
</table>
</div>
<!-- /.box-body -->
<div class="box-footer">
Footer
</div>
<!-- /.box-footer-->
</div>
<!-- /.box -->
<!-- page script -->
<script>
function down(data) {
var dd = {
content: [
data,
'Another paragraph, this time a little bit longer to make sure, this line will be divided into at least two lines'
],
defaultStyle: {
font: 'kaiu'
}
};
pdfMake.fonts = {
kaiu: {
normal: 'kaiu.ttf',
bold: 'kaiu.ttf',
italics: 'kaiu.ttf',
bolditalics: 'kaiu.ttf'
}
};
pdfMake.createPdf(dd).download();
}
$(document).ready(function() {
pdfMake.fonts = {
Roboto: {
normal: 'kaiu.ttf',
bold: 'kaiu.ttf',
italics: 'kaiu.ttf',
bolditalics: 'kaiu.ttf'
}
};
$('#tblAuthority').DataTable({
ajax: {url:"/authentication/authorities",dataSrc:""},
columns: [
{ data: "id", visible: false},
{ data: "name" },
{ data: "description" },
{
data: "id", render: function(data, type, row, meta) {
return '<a href=' data ' class="btn btn-xs btn-primary"><i class="fa fa-pencil"></i>Edit</a> <a href=' data ' class="btn btn-xs btn-danger"><i class="fa fa-trash-o">Delete</a>'
},
className: "center",
}
],
dom: 'lrBtip',
buttons: [
'copy','excel',
{
extend: 'pdf',
text: 'PDF',
className: "btn btn-xs btn-primary",
'title': 'Authority List',
'download': 'open',//直接在視窗開啟
},
{
extend: 'csv',
text: 'CSV',
className: "btn btn-xs btn-primary",
bom : true
},
{
text: 'My button',
className: "btn btn-xs btn-primary",
action: function ( e, dt, node, config ) {
alert( 'Button activated' );
}
},
{
text: 'Reload',
className: "btn btn-xs btn-primary",
action: function ( e, dt, node, config ) {
dt.ajax.reload();
}
}
]
});
})
</script>
https://hk.saowen.com/a/b58fede7fdfaef23bb9236286cc6ac318607f9f6899fd684c6d2af2509a4be3f
https://blog.csdn.net/qq_30076899/article/details/79731508
https://github.com/bpampuch/pdfmake/wiki/Custom-Fonts---client-side
文章標籤
全站熱搜
留言列表
PTC-Windchill (1)