質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.46%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

PDF

PDF(Portable Document Format)とはISOによって国際標準として制定されている電子ドキュメント用の拡張子です。

Q&A

0回答

1260閲覧

Vue.jsでpdfmakeを使ったPDFのヘッダー幅を大きくしたい

aoisengaog

総合スコア4

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

PDF

PDF(Portable Document Format)とはISOによって国際標準として制定されている電子ドキュメント用の拡張子です。

0グッド

0クリップ

投稿2021/09/11 05:07

前提・実現したいこと

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.46%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問