web-dev-qa-db-ja.com

jsPDFでテキストを中央に配置する方法はありますか？

Javascriptを使用して簡単なPDFドキュメントを作成しようとしています。 jsPDFを見つけましたが、テキストを中央揃えにする方法がわかりません。出来ますか？

javascriptjspdf
32
Dev01

はい、可能です。使用するjsPDFプラグインメソッドを作成できます。

1つの簡単な例は次のとおりです。

    (function(API){
    API.myText = function(txt, options, x, y) {
        options = options ||{};
        /* Use the options align property to specify desired text alignment
         * Param x will be ignored if desired text alignment is 'center'.
         * Usage of options can easily extend the function to apply different text 
         * styles and sizes 
        */
        if( options.align == "center" ){
            // Get current font size
            var fontSize = this.internal.getFontSize();

            // Get page width
            var pageWidth = this.internal.pageSize.width;

            // Get the actual text's width
            /* You multiply the unit width of your string by your font size and divide
             * by the internal scale factor. The division is necessary
             * for the case where you use units other than 'pt' in the constructor
             * of jsPDF.
            */
            txtWidth = this.getStringUnitWidth(txt)*fontSize/this.internal.scaleFactor;

            // Calculate text's x coordinate
            x = ( pageWidth - txtWidth ) / 2;
        }

        // Draw text at x,y
        this.text(txt,x,y);
    }
})(jsPDF.API);

そして、あなたはこのようにそれを使用します

var doc = new jsPDF('p','in');
doc.text("Left aligned text",0.5,0.5);
doc.myText("Centered text",{align: "center"},0,1);
59
Tsilis

これは jsPdfホームページ のスクラッチパッドで機能します：

var centeredText = function(text, y) {
    var textWidth = doc.getStringUnitWidth(text) * doc.internal.getFontSize() / doc.internal.scaleFactor;
    var textOffset = (doc.internal.pageSize.width - textWidth) / 2;
    doc.text(textOffset, y, text);
}
26
sjy

現在のバージョンのjsPdfは、次のような関数シグネチャを持つパラメーター「align」をサポートしていることがわかりました。

API.text = function (text, x, y, flags, angle, align)

したがって、次のようにすると中央揃えのテキストが表示されます。

doc.text('The text', doc.internal.pageSize.width, 50, null, null, 'center');

ただし、現時点では、「var」が欠落しているため、厳格モードがオンになっていると、ライブラリでエラーがスローされます。問題とプルリクエストがありますが、修正は次のとおりではありません： https://github.com/MrRio/jsPDF/issues/575

これを探している人は、いつか、これを使ってテキストの中央揃えを簡単にすることができるかもしれません。

8
Ben

WootWoot、より多くのレイアウトオプションが必要な場合に備えて、私の pdfmake ライブラリもご覧ください

以下をサポートします。

  • テキストの配置、リスト、マージン
  • スタイリング（スタイルの継承あり）
  • 自動/固定/スターサイズの列、自動繰り返しヘッダー、列/行スパンを持つテーブル
  • ページのヘッダーとフッター
  • フォントの埋め込み、および他のいくつかのオプション

クライアント側（純粋なJS）またはサーバー側（npmモジュール）で動作します

the playground を見て、可能なことを確認してください

がんばろう

7
bartekp

PDFファイルの作成中に同じ問題と他の多くの問題が発生しました（例：auto-pagebreak、total-pageCount）。だから私は少しのライブラリを書き始めました。これはjsPDFに依存していますが、あなたがそれらを知っている方法で多くの機能を提供します（フォームHTML/CSSとjQuery）。 GitHub で見つけることができます。 PDFの作成が簡単になることを願っています... =）

3
platdesign

@Tsilisの回答に基づいて、ここでプラグインを抜粋しました https://Gist.github.com/Purush0th/7fe8665bbb04482a0d8 テキストを指定されたテキストコンテナー幅で左、右、中央に揃えることができます。

(function (api, $) {
'use strict';
api.writeText = function (x, y, text, options) {
    options = options || {};

    var defaults = {
        align: 'left',
        width: this.internal.pageSize.width
    }

    var settings = $.extend({}, defaults, options);

    // Get current font size
    var fontSize = this.internal.getFontSize();

    // Get the actual text's width
    /* You multiply the unit width of your string by your font size and divide
     * by the internal scale factor. The division is necessary
     * for the case where you use units other than 'pt' in the constructor
     * of jsPDF.
    */
    var txtWidth = this.getStringUnitWidth(text) * fontSize / this.internal.scaleFactor;

    if (settings.align === 'center')
        x += (settings.width - txtWidth) / 2;
    else if (settings.align === 'right')
        x += (settings.width - txtWidth);

    //default is 'left' alignment
    this.text(text, x, y);

}
})(jsPDF.API, jQuery);

使用法

var doc = new jsPDF('p', 'pt', 'a4');
//Alignment based on page width
doc.writeText(0, 40 ,'align - center ', { align: 'center' });
doc.writeText(0, 80 ,'align - right ', { align: 'right' });
//Alignment based on text container width
doc.writeText(0, 120 ,'align - center : inside container',{align:'center',width:100});
3
Purushoth

doc.text（text、left、top、 'center'）は、テキストの中央揃えに使用できます。行の配列でも使用できますが、配列で使用すると中心が正しく機能しないため、配列内のすべてのオブジェクトのループで使用しました。

var lMargin=15; //left margin in mm
var rMargin=15; //right margin in mm
var pdfInMM=210;  // width of A4 in mm
var pageCenter=pdfInMM/2;

var doc = new jsPDF("p","mm","a4");
var paragraph="Apple's iPhone 7 is officially upon us. After a week of pre-orders, the latest in the iPhone lineup officially launches today.\n\nEager Apple fans will be lining up out the door at Apple and carrier stores around the country to grab up the iPhone 7 and iPhone 7 Plus, while Android owners look on bemusedly.\n\nDuring the Apple Event last week, the tech giant revealed a number of big, positive changes coming to the iPhone 7. It's thinner. The camera is better. And, perhaps best of all, the iPhone 7 is finally water resistant.\n\nStill, while there may be plenty to like about the new iPhone, there's plenty more that's left us disappointed. Enough, at least, to make smartphone shoppers consider waiting until 2017, when Apple is reportedly going to let loose on all cylinders with an all-glass chassis design.";

var lines =doc.splitTextToSize(paragraph, (pdfInMM-lMargin-rMargin));
var dim = doc.getTextDimensions('Text');
var lineHeight = dim.h
for(var i=0;i<lines.length;i++){
  lineTop = (lineHeight/2)*i
  doc.text(lines[i],pageCenter,20+lineTop,'center'); //see this line
}
doc.save('Generated.pdf');
2
Saifee