如何更改数据表中的导出 PDF 字体大小？

Posted 2023-05-07

【中文标题】如何更改数据表中的导出 PDF 字体大小？

【英文标题】：How to change export PDF font size in datatables?

【发布时间】：2016-03-04 01:36:26

【问题描述】：

我有一个数据表，我有打印按钮和 pdf 按钮。 我可以在打印页面时更改字体大小，但在导出 pdf 文件时无法更改字体大小。

    
        extend: 'pdfhtml5',
        text: 'Save PDF',
        exportOptions: 
            modifier: 
                page: 'current'
            
        ,
        header: true,
        title: 'My Table Title',
        orientation: 'landscape'
    , 
    
        extend: 'print',
        text: 'Print',
            customize: function ( win ) 
                $(win.document.body)
                    .css( 'font-size', '15pt' )


                $(win.document.body).find( 'table' )
                    .addClass( 'compact' )
                    .css( 'font-size', '8pt' );
            ,
            header: false,
            title: '',
            orientation: 'landscape'
     ,

你能帮帮我吗？

【参考方案1】：

如果您查看 html5.js 的 src，它会创建一个默认对象字面量 doc 并保存默认设置：

var doc = 
    pageSize: config.pageSize,
    pageOrientation: config.orientation,
    content: [
        
            table: 
                headerRows: 1,
                body: rows
            ,
            layout: 'noBorders'
        
    ],
    styles: 
        tableHeader: 
            bold: true,
            fontSize: 11,
            color: 'white',
            fillColor: '#2d4154',
            alignment: 'center'
        ,
        tableBodyEven: ,
        tableBodyOdd: 
            fillColor: '#f3f3f3'
        ,
        tableFooter: 
            bold: true,
            fontSize: 11,
            color: 'white',
            fillColor: '#2d4154'
        ,
        title: 
            alignment: 'center',
            fontSize: 15
        ,
        message: 
    ,
    defaultStyle: 
        fontSize: 10
    
;

您可以使用customize 回调来更改这些默认设置：

   extend: 'pdfHtml5',
   text: 'Save PDF',
   exportOptions: 
      modifier: 
         page: 'current'
      
   ,
   header: true,
   title: 'My Table Title',
   orientation: 'landscape',
   customize: function(doc) 
      doc.defaultStyle.fontSize = 16; //<-- set fontsize to 16 instead of 10 
     
, 

---

更改标题字体大小：

doc.styles.tableHeader.fontSize = 30    

https://jsfiddle.net/2nwqa2jk/12/

更改对齐方式，将所有页眉设置为中心，将所有列设置为所有页脚：

doc.defaultStyle.alignment = 'center'

https://jsfiddle.net/2nwqa2jk/13/

【讨论】：

我的表格在导出的 pdf 中左对齐。如何将其居中对齐？

我只需要更改标题的字体大小。我改变了正文字体大小

在哪里可以看到所有选项？

@darioxlz，查看 pdfmake 文档，尤其是pdfmake.github.io/docs/document-definition-object

如何让表格占PDF页面宽度的100%？