4

Appcelerator の Titanium を介して jsPDF を使用して PDF ドキュメントを生成しています。ここで、2 つのセグメントを持つ単純な円グラフを追加する必要があります。どうすれば最も簡単な方法でそれを行うことができますか?

派手なものである必要はありません。最初に画像を生成し、その画像をドキュメントに追加することを考えています。円グラフの画像を生成して電話に保存できるライブラリがあるかもしれません。ただし、jsPDF の画像のサポートについてはよくわかりません。ライブラリの適切なドキュメントが見つからないようです。

4

2 に答える 2

10

ほぼ 1 年間活動していないことは承知していますが、受け入れられた回答がないため、回答を試みます。

jsPDF へのグラフの追加

1. HTML キャンバスを使用して、グラフをサポートされている画像形式 (base64 でエンコードされた JPEG または PNG) に変換します。

2. addImage 関数で使用できる画像 URL を確認します。

以下は、未加工の base64 コードを含めることなく、jsPDF ドキュメントに画像を追加する例です。これはjsPDFの例から取られています。

function demoImages() {
    // Because of security restrictions, getImageFromUrl will
    // not load images from other domains.  Chrome has added
    // security restrictions that prevent it from loading images
    // when running local files.  Run with: chromium --allow-file-access-from-files --allow-file-access
    // to temporarily get around this issue.
    var getImageFromUrl = function(url, callback) {
        var img = new Image(), data, ret = {
            data: null,
            pending: true
        };

        img.onError = function() {
            throw new Error('Cannot load image: "'+url+'"');
        };
        img.onload = function() {
            var canvas = document.createElement('canvas');
            document.body.appendChild(canvas);
            canvas.width = img.width;
            canvas.height = img.height;

            var ctx = canvas.getContext('2d');
            ctx.drawImage(img, 0, 0);
            // Grab the image as a jpeg encoded in base64, but only the data
            data = canvas.toDataURL('image/jpeg').slice('data:image/jpeg;base64,'.length);
            // Convert the data to binary form
            data = atob(data);
            document.body.removeChild(canvas);

            ret['data'] = data;
            ret['pending'] = false;

            console.log("data",data);

            if (typeof callback === 'function') {
                callback(data);
            }
        };
        img.src = url;

        return ret;
    };

    // Since images are loaded asyncronously, we must wait to create
    // the pdf until we actually have the image data.
    // If we already had the jpeg image binary data loaded into
    // a string, we create the pdf without delay.
    var createPDF = function(imgData) {
        var doc = new jsPDF();

        doc.addImage(imgData, 'JPEG', 10, 10, 50, 50);
        doc.addImage(imgData, 'JPEG', 70, 10, 100, 120);

        doc.save('output.pdf');

    }

    getImageFromUrl('thinking-monkey.jpg', createPDF);
}

jsPDF の優れたドキュメント

jsPDF の実用的なドキュメントから、多くの jsPDF 機能を学ぶことができます。たとえば、ソース コードについては、一部のファイルが欠落しているため、GitHub からダウンロードしないでください。ここからダウンロードできます。

注:コードが機能するように、basic.js の 312 行目のセミコロンを削除します。

乾杯、...

于 2014-02-06T16:49:58.067 に答える
3

たぶん、最初にjsPDFサイトをチェックして、ライブラリ（おそらくグーグルチャート）で画像を生成し、グラフを画像として保存してから、プラグインjspdf.plugin.addimage.jsといくつかのコードを使用してPDFに追加することができます。これは彼らのウェブサイトから取られた例です

var imgData = 'here the jpeg image string on base64';
var doc = new jsPDF();

doc.setFontSize(40);
doc.text(35, 25, "Octonyan loves jsPDF");
doc.addImage(imgData, 'JPEG', 15, 40, 180, 180);
于 2013-02-05T20:41:10.810 に答える