Angular-UI-Grid – wie fügt man ein Bild in die top der exportierten PDF-Datei?

Ich bin mit Angular UI Grid und ich habe versucht, einige Möglichkeiten zum hinzufügen von ein Bild (logo) auf der Spitze des PDF-Dokuments, die wird exportiert.

Habe ich kein Glück mit den Implementierungen, die ich ausprobiert habe…

exporterPdfHeader: { text: "My Header", image: "<urlOfImage>" }
exporterPdfHeader: { text: "My Header", backgroundImage: "<urlOfImage>" }
exporterPdfHeader: { text: "My Header", backgroundImage: url("<urlOfImage>") }

Ist dies auch möglich ist?

Vielen Dank im Voraus.

  • versuche, in meiner Frage oben.
  • Wie waren Sie in der Lage zu bekommen dies funktioniert am Ende?
InformationsquelleAutor user1135192 | 2016-06-08



2 Replies
  1. 1

    Können Sie fügen Sie Ihr Bild innerhalb einer benutzerdefinierten html-header mit headerTemplate: 'header-template.html', im raster-Optionen?

    Siehe Beispiel ui-grid-tutorial

    Bearbeiten

    OK, nachdem wir sahen, die Quelle und Dokumente für den export, es gibt dort nichts über die Weitergabe von Bildern in der Kopfzeile.

    Es tut, verweisen Sie auf pdfMake

    Bilder

    Dies ist einfach. Verwenden Sie einfach die { image: ‚…‘ } Knotentyp.

    JPEG-und PNG-Formate werden unterstützt.

    var docDefinition = { 
       content: [ 
           { //you'll most often use dataURI images on the browser side //if no width/height/fit is provided, the original size will be used image: 'data:image/jpeg;base64,...encodedContent...' },
           { //if you specify width, image will scale proportionally image: 'data:image/jpeg;base64,...encodedContent...', width: 150 }, 
           { //if you specify both width and height - image will be stretched image: 'data:image/jpeg;base64,...encodedContent...', width: 150, height: 150 }, 
           { //you can also fit the image inside a rectangle image: 'data:image/jpeg;base64,...encodedContent...', fit: [100, 100] }, 
           { //if you reuse the same image in multiple nodes, //you should put it to to images dictionary and reference it by name image: 'mySuperImage' }, 
           { //under NodeJS (or in case you use virtual file system provided by pdfmake) //you can also pass file names here image: 'myImageDictionary/image1.jpg' } ], 
      images: { 
          mySuperImage: 'data:image/jpeg;base64,...content...' } }
    

    Zitat Ende

    So sieht es aus wie Sie waren in der Nähe.

    Können Sie versuchen, einen relativen Pfad von der Wurzel Ihrer website, eingewickelt in einfache Anführungszeichen gesetzt werden.

    • Wie hast du es geschafft, dein Bild in der pdf-Datei am Ende?
  2. 0

    Hatte zu schreiben, eine eigene export-Funktion zum hinzufügen von Seitenrändern.

    Plnkr

    $scope.export = function() {
        var exportColumnHeaders = uiGridExporterService.getColumnHeaders($scope.gridApi.grid, uiGridExporterConstants.ALL);
        var exportData = uiGridExporterService.getData($scope.gridApi.grid, uiGridExporterConstants.ALL, uiGridExporterConstants.ALL, true);
        var docDefinition = uiGridExporterService.prepareAsPdf($scope.gridApi.grid, exportColumnHeaders, exportData);
    
        docDefinition.pageMargins = [40, 80, 40, 60];   
    
        if (uiGridExporterService.isIE() || navigator.appVersion.indexOf("Edge") !== -1) {
          uiGridExporterService.downloadPDF($scope.gridOptions.exporterPdfFilename, docDefinition);
        } else {
          pdfMake.createPdf(docDefinition).open();
        }
      }
    

    Bild als base-64-codiert, es sei denn, mit Node.js (wie pro pdfmake Bibliothek).
    Andernfalls müssen Sie möglicherweise verwenden Sie eine JavaScript-Funktion zum laden und konvertieren eines Bildes in den base-64.

    Referenzen:

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.