1. 製品
  2.   PDF
  3.   JavaScript
  4.   PDFMake-Wrapper
 
  

無料の JavaScript API による PDF ファイルの作成

オープンソース JavaScript ライブラリはPDFの文書を生成、編集、印刷、テーブル、画像、ヘッダー、またはフッターをPDF秒に追加することができます。

使いやすいライブラリを探して、サーバー側やクライアント側でPDF文書を作成および管理します。 PDFMake-Rapperは、独自のJavaScriptアプリケーション内のPDF文書を小さくし、コストを削減することができます。 オープンソースの純粋なJavaScriptライブラリです。ソフトウェアエンジニアは、外部の依存関係なしで有用なPDF文書やレポートを生成する能力を与えます。

PDFMake-Wrapper ライブラリには、行折り返し、テキスト配置、余白の使用、スタイルの作成と適用、テーブルと列の使用、client/サーバー側の PDF 印刷、ページ ヘッダーとフッターの挿入、ページ カウント、カスタム改ページ、フォントの埋め込み、目次、PDF メタデータの抽出など。これは、PDF ドキュメントを簡単かつ迅速に開発するための機能を提供するラッパー ライブラリです。 PDFMake-Wrapper の優れた機能の 1 つは、宣言型のアプローチを採用していることです。これにより、ユーザーは達成したいことに簡単に集中できます。ライブラリは非常に安定しており、クライアント側とサーバー側で簡単に使用できます。

Previous Next

PDFMake-Rapper入門

PDFMake-Rapperはnumで利用できます、 簡単にダウンロードして、マシンにインストールできます。 このライブラリを使用するには、これらの3つのパッケージをインストールする必要があります。

PDFMakeをnumでインストールする

npm install pdfmake --save

@types/pdfmake には、 pdfmake の型が含まれているため、エラーの入力を避けることができます。

npm install @types/pdfmake --save-dev

num によって pdfmake-wrapper を取付けて下さい ツイート

npm install pdfmake-wrapper --save

JavaScript で PDF ドキュメントを作成&管理

オープン ソースの PDFMake-Wrapper ライブラリは、JavaScript で PDF ドキュメントを生成するための優れた選択肢です。これにより、ソフトウェア開発者は、ブラウザー (クライアント側) および Node.js (サーバー側) で、わずか数行の JavaScript コードを使用して PDF ドキュメントを作成できます。 PDF ファイルが作成されると、それを変更したり、テキストを挿入したり、フォントやグラフィックを埋め込んだり、さまざまなスタイルから選択して適用したり、外部画像を挿入したりできます。 HTML から PDF ファイルを作成することも可能ですが、そのためには html2canvas が必要です。

JavaScriptからHTMLファイルを作成する方法


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

リーダーとフッターの加算は、JavaScriptファイルからPDFファイルまで

オープン ソースの PDFMake-Wrapper ライブラリを使用すると、ソフトウェア開発者は、わずか数行のコードで、PDF ドキュメント内にヘッダーとフッターを非常に簡単に追加できます。ヘッダー/フッター セクション内に画像を使用することもできます。ページ番号、会社ロゴ、著者名、ページ数、ページ サイズなどの他のコンテンツをヘッダー/フッター セクションに追加することもできます。さまざまな種類のスタイルや書式を適用することもできます。ヘッダーまたはフッター セクションで必要な場合はいつでも、インライン スタイルを使用することをお勧めします。

Sライブラリを介してPDF内のテーブルをインサート&管理

PDFMake-Wrapper ライブラリは、PDF ドキュメント内でのテーブルの使用を完全にサポートしています。新しいテーブルを最初から作成する、テーブルのヘッダーを追加する、既存のテーブルのサイズを変更する、ヘッダーにフォーマットを追加する、新しいセルを挿入する、列とセルを結合する、テーブルにスタイルを適用するなど、JavaScript アプリケーション内で複雑なテーブルを管理するためのさまざまな便利な機能を提供します。等々。

列をS APIを介してPDFテーブルで結合する方法?

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;

JavaScript APIを経由してPDFのセクターを引く

P PDFMake-Rapperライブラリは、ソフトウェア開発者がPDF文書内のベクトル図を容易に描画することができます。 ベクトルを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'
        });
    });
});
 日本