Is there any way to center text with jsPDF?

前端 未结 9 1212
半阙折子戏
半阙折子戏 2021-02-01 02:07

I\'m trying to create a simple pdf doc using javascript. I found jsPDF but I don\'t figure out how to center text. Is it possible?

9条回答
  •  时光取名叫无心
    2021-02-01 02:59

    Based on @Tsilis answer I have snippet out a plugin here https://gist.github.com/Purush0th/7fe8665bbb04482a0d80 which can align the text left, right and center in the given text container width.

    (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);
    

    Usage

    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});
    

提交回复
热议问题