1. Produkter
  2.   PDF
  3.   JavaScript
  4.   PDFMake-Wrapper
 
  

Skapa PDF-filer via gratis JavaScript API

Öppen källa JavaScript Biblioteket kan generera, redigera och skriva ut PDF dokument, lägga till tabeller, bilder och rubriker eller sidfot till PDFs.

Letar du efter ett lättanvänt bibliotek för att skapa och hantera PDF dokument på serversidan samt klientsidan. PDFMake-Rapper kan vara ett bra val för att hantera dina PDF dokument i dina egna JavaScript applikationer med mindre ansträngning och mindre kostnad. Det är en öppen källkod ren JavaScript bibliotek som ger mjukvaruingenjörer möjlighet att generera användbara PDF dokument och rapporter utan några externa beroenden.

Biblioteket PDFMake-Rapper har inkluderat stöd för flera viktiga grundläggande samt avancerade funktioner relaterade till PDF dokument skapande och förvaltning, såsom linje-wrapping, textjusteringar, med marginaler, skapa och tillämpa stilar, med hjälp av tabeller och kolumner, klient / server-side PDF utskrift, infoga sidhuvuden och sidfoten, sidräkning, anpassade sidbrytningar, teckeninbäddning, innehållsbord, extrahera PDF metadata och mycket mer. Det är ett wrapperbibliotek som ger funktioner för att utveckla PDF dokument på ett enkelt och snabbare sätt. Ett bra inslag i PDFMake-Rapper är att det har antagit ett deklarativt tillvägagångssätt, vilket ger användarna möjlighet att enkelt fokusera på vad de vill uppnå. Biblioteket är mycket stabilt och kan enkelt användas på klienten samt serversidan.

Previous Next

Komma igång med PDFMake-Rapper

PDFMake-Rapper finns på num, Du kan enkelt ladda ner den och installera den på din maskin. För att använda detta bibliotek måste du installera dessa tre paket.

Installera PDFMake via Num

npm install pdfmake --save

@types/pdfmake innehåller typerna för pdfmake för att undvika att skriva fel.

npm install @types/pdfmake --save-dev

Installera pdfmake-wrapper via num <

npm install pdfmake-wrapper --save

Skapa och hantera PDF dokument via JavaScript

Den öppna källan PDFMake-Rapper bibliotek är ett utmärkt val för att generera PDF dokument i JavaScript. Det gör det möjligt för programutvecklare att skapa PDF dokument i webbläsaren (klientsidan) och i Node.js (server-side) med bara ett par rader med JavaScript kod. När PDF-filen är skapad kan du också ändra den samt infoga text, bädda in teckensnitt och grafik, välj och tillämpa från olika stilar, infoga externa bilder och mycket mer. Det är också möjligt att skapa en PDF fil från HTML, men du behöver html2canvas för det.

Hur man skapar PDF filer från HTML via JavaScript


html2canvas(document.getElementById('exportthis'), {
  onrendered: function (canvas) {
    var data = canvas.toDataURL();
    var docDefinition = {
      content: [{
        image: data,
        width: 500,
      }]
    };
    pdfMake.createPdf(docDefinition).download("Score_Details.pdf");
  }
});

Ledare & Footer Addition till PDF Fil via JavaScript

Den öppna källan PDFMake-Rapper-biblioteket gör det mycket enkelt för programutvecklare att lägga till rubriken samt sidfoten i sina PDF dokument med bara några rader kod. Det är också möjligt att använda en bild inuti rubriken/fotavsnittet. Det är också möjligt att lägga till annat innehåll som sidnummer, företagslogotyp, författarenamn, sidräkning, sidstorlek, etc. till sidhuvudet / fotografen. Det är också möjligt att tillämpa olika typer av styling och formatering. Bättre använda inline styling när det behövs i rubriken eller sidfoten.

Infoga och hantera tabeller inom PDF via S-biblioteket

Biblioteket PDFMake-Rapper har gett fullständigt stöd för att använda tabeller i PDF dokument. Det ger olika användbara funktioner för att hantera komplexa tabeller inuti JavaScript applikationer, såsom att skapa nya tabeller från början, lägga till rubriker för tabeller, bosatta befintliga tabeller, lägga till format till rubriker, infoga nya celler, kombinera kolumner och celler, tillämpa stilar på tabeller, och så vidare.

Hur man kombinerar kolumner i PDF tabeller via S API?

new Table([
    [
        new Txt('Name').bold().end,
        new Txt('Address').bold().end,
        new Txt('Email').bold().end,
        new Txt('Phone').bold().end
    ],
    [new Cell(new Txt('A').end).colSpan(4).end, null, null, null],
    ['Anastasia', 'Some direction 1', 'anastasia@domain.com', '123 4566 187'],
    ['Alexander', 'Some direction 2', 'alexander@domain.com', '123 4566 187'],
    [new Cell(new Txt('C').end).colSpan(4).end, null, null, null],
    ['Clementine', 'Some direction 3', 'clementine@domain.com', '123 4566 187'],
    ['Chelsey', 'Some direction 4', 'chelsey@domain.com', '123 4566 187'],
    [new Cell(new Txt('N').end).colSpan(4).end, null, null, null],
    ['Nicholas', 'Some direction 5', 'nicholas@domain.com', '123 4566 187'],
])
.widths(...)
.heights(...)
.end;

Dragsektorer inom PDF via JavaScript API

P PDFMake-Rapper-biblioteket gör det möjligt för programutvecklare att dra vektorformer inuti PDF dokument med lätthet. För att dra vektorer i PDF filer är det nödvändigt att skapa en duk som är där vektorer kommer att dras. Kom ihåg att ordern är viktig på duken, den sista vektorn kommer att vara ovanpå de andra. När du har skapat kan du också ändra storleken efter dina egna behov och ersätta den med lätthet.

Draw Line inuti PDF via JavaScript

import { Line } from '../../../src';
describe('Line definition class', () => {
    it('should be instanced', () => {
        const line = new Line(10, 10);
        expect( line.end ).toBeTruthy();
    });
    it('should be a simple line', () => {
        const line = new Line(10, 10).end;
        expect( line ).toEqual({ 
            type: 'line',
            x1: 10,
            y1: 10,
            x2: 10,
            y2: 10
        });
    });
    it('should be a line vector with full properties', () => {
        const line = new Line(10, 10)
            .color('red')
            .dash(5)
            .fillOpacity(0.1)
            .lineColor('blue')
            .lineWidth(3)
            .linearGradient(['green', 'yellow'])
            .lineCap('round')
            .end;
        expect( line ).toEqual({ 
            type: 'line',
            x1: 10,
            y1: 10,
            x2: 10,
            y2: 10,
            color: 'red',
            dash: { length: 5 },
            fillOpacity: 0.1,
            lineColor: 'blue',
            lineWidth: 3,
            linearGradient: ['green', 'yellow'],
            lineCap: 'round'
        });
    });
});
 Svenska