1. Продукти
  2.   PDF
  3.   JavaScript
  4.   PDFMake-Wrapper
 
  

Створення PDF-файлів через безкоштовний JavaScript API

Відкрити джерело JavaScript Бібліотека дозволяє генерувати, редагувати та друкувати PDF документів, додати таблиці, зображення та заголовки або нижній колонтитул до PDF-х років.

Щоб створити та керувати PDF документів на сервері, а також клієнту. PDFMake-Rapper може бути відмінним вибором для обробки ваших PDF документів всередині власних JavaScript додатків з меншими зусиллями і меншою вартістю. Це відкритий джерело чистої JavaScript бібліотеки, що дає розробникам програмного забезпечення можливість генерувати корисні PDF документів і звітів без зовнішніх залежностей.

Русский EnglishРусскийУкраїнськаPolskiItalianoEspañol汉语Bahasa Indonesiaहिन्दीPortuguês日本語DeutschFrançaisภาษาไทยελληνικά اللغة العربية Це бібліотека обгортки, яка надає функціональні можливості для розробки PDF документів у зручний і швидкий спосіб. Однією відмінною рисою PDFMake-Rapper є те, що він прийняв декларативний підхід, що дає користувачам можливість легко зосередитися на тому, що вони хочуть досягти. Бібліотека дуже стабільна і легко використовується на клієнті, а також на сервері.

Previous Next

Початок роботи з PDFMake-Rapper

PDFMake-Rapper доступна на нумері, Ви можете легко завантажити його і встановити його на вашому пристрої. Щоб скористатися цією бібліотекою, потрібно встановити ці три пакети.

Встановіть PDFMake через нумерацію

npm install pdfmake --save

@types/pdfmake містить типи для pdfmake, щоб уникнути помилок друку.

npm install @types/pdfmake --save-dev

Встановити pdfmake-wrapper через num Головна

npm install pdfmake-wrapper --save

Створити та керувати PDF документів по JavaScript

Бібліотека PDFMake-Wrapper з відкритим кодом є чудовим вибором для створення PDF-документів у JavaScript. Це дозволяє розробникам програмного забезпечення створювати PDF-документи в браузері (на стороні клієнта) і в Node.js (на стороні сервера) за допомогою лише кількох рядків коду JavaScript. Після створення PDF-файлу ви також можете змінювати його, а також вставляти текст, вбудовувати шрифти та графіку, вибирати та застосовувати різні стилі, вставляти зовнішні зображення та багато іншого. Також можна створити файл PDF з HTML, але для цього вам знадобиться html2canvas.

Як створити PDF файл з HTML по 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");
  }
});

Додавання колонтитулів до файлу PDF за допомогою JavaScript

Русский EnglishРусскийУкраїнськаPolskiItalianoEspañol汉语Bahasa Indonesiaहिन्दीPortuguês日本語DeutschFrançaisภาษาไทยελληνικά اللغة العربية Також можна використовувати зображення всередині секції заголовка / нижній колонтитул. Також можна додати інший вміст, як номер сторінки, логотип компанії, ім'я автора, кількість сторінок, розмір сторінки і т.д. до розділу заголовка / нижній колонтитул. Також можна застосувати різні види укладання та форматування. Краще використовувати вбудовану укладку при необхідності в заголовку або нижній частині.

Вставити та керувати таблиці всередині PDF за допомогою бібліотеки S

Бібліотека PDFMake-Wrapper забезпечує повну підтримку використання таблиць у документах PDF. Він надає різноманітні корисні функції для керування складними таблицями в програмах JavaScript, наприклад створення нових таблиць з нуля, додавання заголовків до таблиць, зміна розміру існуючих таблиць, додавання формату до заголовків, вставлення нових комірок, об’єднання стовпців і комірок, застосування стилів до таблиць, і так далі.

Як об'єднати стовпці в PDF таблиці за допомогою 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;

Сектори малювання всередині PDF за JavaScript API

Русский EnglishРусскийУкраїнськаPolskiItalianoEspañol汉语Bahasa Indonesiaहिन्दीPortuguês日本語DeutschFrançaisภาษาไทยελληνικά اللغة العربية Для малювання векторів в PDF файлах необхідно створити полотно, яке де будуть намальовані вектори. Будь ласка, пам'ятайте, що замовлення стосується полотна, останній вектор буде зверху інших. Після того, як ви створили, ви також можете змінити його відповідно до власних потреб і замінити його з легкістю.

Намалюйте лінію всередині PDF за допомогою 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'
        });
    });
});
 Українська