Donnerstag, Dezember 12, 2019

Gibt es eine Möglichkeit, Text mit jsPDF zu zentrieren?

Ich versuche zu schaffen, ein einfaches pdf-Dokument mit javascript. Ich fand jsPDF ich aber noch nicht herausfinden, wie man text zentrieren. Ist es möglich?

Kommentar zu dem Problem
Tsilis die Antwort soll akzeptiert werden, wie es befasst sich mit OP ‚ s Frage, und es ist die beste Antwort Kommentarautor: Haitham Maya
@HaithamMaaieh getan. Kommentarautor: Tom Krones

InformationsquelleAutor der Frage Tom Krones | 2014-01-11

7 Kommentare

  1. 47

    Ja, das ist möglich. Sie schreiben, könnte eine jsPDF plugin-Methode zu verwenden.

    Ein kurzes Beispiel:

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

    Und verwenden Sie es wie diese

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

    InformationsquelleAutor der Antwort Tsilis

  2. 21

    Diese Werke in das Eingabefeld auf der jsPdf homepage:

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

    InformationsquelleAutor der Antwort sjy

  3. 4

    WootWoot, nur für den Fall Sie benötigen mehr layout-Optionen, Sie könnten auch einen Blick auf meine pdfmake Bibliothek

    Unterstützt:

    • text-Ausrichtungen, Liste, Margen
    • styling (mit Stil Vererbung)
    • Tabellen mit auto/fest/Sterne-große Spalten, auto-wiederholten Kopfzeilen, col/row erstreckt
    • Kopf-und Fußzeilen
    • font-Einbettung, und ein paar andere Optionen

    Es funktioniert auf client-Seite (reines JS) oder server-Seite (eine npm-Modul)

    Werfen Sie einen Blick auf der Spielplatz zu sehen, was möglich

    Glück

    InformationsquelleAutor der Antwort bartekp

  4. 3

    Ich hatte das gleiche problem und viele andere beim erstellen von PDF-Dateien (z.B. auto-pagebreak, Gesamt-Seitenzahl). Also habe ich angefangen zu schreiben, eine kleine lib, die abhängig von jsPDF, sondern gibt Ihnen eine Menge von Funktionen in einer Weise, die Sie kennen Sie (in form von HTML/CSS und jQuery). Sie finden es auf GitHub. Ich hoffe, es macht PDF-Erstellung einfacher… =)

    InformationsquelleAutor der Antwort platdesign

  5. 3

    Basierend auf @Tsilis Antwort habe ich Schnipsel aus einem plugin hier https://gist.github.com/Purush0th/7fe8665bbb04482a0d80 kann text ausrichten Links, rechts und in der Mitte in der gegebenen text-container-Breite.

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

    Nutzung

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

    InformationsquelleAutor der Antwort Purushoth

  6. 2

    Habe ich festgestellt, dass die aktuelle version von jsPdf unterstützt einen parameter ‚align‘ mit der Funktion Signatur wie diese:

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

    So dass die folgenden sollten Sie einen zentriert ausgerichteten text:

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

    Jedoch am aktuellen Punkt in der Zeit, wird ein Fehler geworfen wird, in der Bibliothek, wenn der strikte Modus ist da ein “ var “ fehlt.
    Es ist ein Problem-und pull-Anfrage für ihn, aber der fix noch nicht gemacht:
    https://github.com/MrRio/jsPDF/issues/575

    Wer auf der Suche nach diesem, eines Tages, Sie könnten in der Lage sein, diese zu verwenden, zu erleichtern, um den text zentrieren.

    InformationsquelleAutor der Antwort Ben

  7. 1

    doc.text(text,Links,oben,’center‘) kann verwendet werden, um text zentrieren. Es kann verwendet werden, mit einem array von Zeilen, aber wenn es verwendet wird, mit einem array der center funktioniert nicht richtig also ich habe es in einer Schleife für jedes Objekt im array.

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

    InformationsquelleAutor der Antwort Saifee

Kostenlose Online-Tests

Letzte Fragen

Tun ItemView löst Blase?

Ich habe eine CompositeView für eine Tabelle. Ich habe Trigger-set in der Kind-ItemView für jede Zeile... var TableRow = Marionette.ItemView.extend({ tagName:...

Wie kann ich untersuchen, WCF was 400 bad request über GET?

Die folgenden WCF-endpoint funktioniert gut mit dem WCF test client: AssetList ListFlaggedAssets(short processCode, string platform, string endpoint = "null", string portalId = "null", int...

Bei der Verwendung von UUIDs, sollte ich auch mit AUTO_INCREMENT?

Wir bauen eine neue web-app, die eine offline-iPad - /Android-app-version auf einer Reihe von lokalen Geräten, die Einsätze mit neuen Daten. Als solche benötigen...

Actionscript-Objekt, das verschiedene Eigenschaften

Wie kann ich die Anzahl der Eigenschaften in einer generischen Actionscript-Objekt? (Wie die Array-Länge) InformationsquelleAutor Fragsworth | 2011-01-15

Wie plot mehrere Graphen und nutzen Sie die Navigations-Taste im [matplotlib]

Die neueste version von matplotlib erstellt automatisch Navigations-buttons unter den graph. Aber die Beispiele, die ich finden alles im Internet zeigen, wie erstellen Sie...