前提・実現したいこと
Vue.jsでpdfmakeを使ってPDFをクライアントサイドで出力しようとしています。
ヘッダー幅を広げて、タイトル部分を大きくしたいのですが大きさ変えることができず苦戦しておりまして、
pdfmakeのドキュメント読んでいるとページサイズ自体はデフォルトで渡すことできるようなので、
その中で何割をヘッダーとみなす、といった設定できるのではと思うのですが、うまくいっておりません
ヘッダ幅を広げる方法ご存知でしたらご教示いただきたいです。
該当のソースコード
node.js
1 2// playground requires you to assign document definition to a variable called dd 3var dd = { 4 header: function(currentPage, pageCount) { 5 return [ 6 { 7 width: ['50%','50%'], 8 columns: [ 9 { text: `ABCCorporation/123Organization`, alignment: 'left' }, 10 { text: `Page:${currentPage}/${pageCount}`, alignment: 'right'}, 11 ], 12 }, 13 { text: `Alice's Report`, alignment: 'center', fontSize: 25, bold: 'true'}, 14 ] 15 }, 16 footer: { 17 columns: [ 18 '', 19 { text: `2020/09/09 00:00:00 Jordan Carol Published`, 20 alignment: 'right', 21 margin: [0,0,30,0] 22 }, 23 ] 24 }, 25 content: [ 26 27 { 28 table: 29 { 30 headerRows: 2, 31 widths: [ '*', 'auto', 100, '*' ], 32 body: [ 33 [ {text:'First'}, 'Second', 'Third', 'The last one' ], 34 [ {text:'Value 1'}, 'Value 2', 'Value 3','value4' ], 35 ], 36 }, 37 layout: { 38 fillColor: function (i, node) { 39 return (i === 0 || i === node.table.body.length) ? '#F2F2F2' : '' 40 }, 41 } 42 }, 43 { 44 table: 45 { 46 widths: [ '*', 'auto', '*' ], 47 body: [ 48 [ {text:'First'}, 'Second', 'Third' ], 49 [ {text:'Value 1'}, 'Value 2', 'Value 3' ], 50 ] 51 }, 52 layout: { 53 fillColor: function (i, node) { 54 return (i === 0 || i === node.table.body.length) ? '#F2F2F2' : '' 55 }, 56 } 57 }, 58 59 { 60 table: { 61 widths: ['*'], 62 body: [ 63 [ 64 {text: `Report` , fillColor: '#F2F2F2'} 65 ], 66 [ 67 {text: 'Text Message'} 68 ] 69 ] 70 }, 71 'border-width': 'thick', 72 margin: [0,50,0,0] 73 74 }, 75 ], 76 77} 78 79 80
補足情報(FW/ツールのバージョンなど)
上記のソースコードをそのままpdfmake backgroundに貼り付けていただけるとプレビュー出して確認することができます。
http://pdfmake.org/playground.html
あなたの回答
tips
プレビュー