MISTECH 技術手抄本

實現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