4

我正在使用 jsPDF 通过 Appcelerator 的 Titanium 生成 PDF 文档。现在我需要添加一个包含两个段的简单饼图。我怎么能以最简单的方式做到这一点？

它不需要什么花哨的东西。我正在考虑先生成图像，然后将该图像添加到文档中。也许有一个库可以生成饼图的图像并将其保存到手机中。但是，我不确定 jsPDF 对图像的支持，我似乎找不到该库的任何好的文档。

4

2 回答 2

10

我知道它已经闲置了将近一年，但由于它没有公认的答案，我会尝试回答。

将图表添加到 jsPDF

1.使用 HTML Canvas 将图表转换为支持的图像格式（JPEG 或 PNG 以 base64 编码）。

2.确保 addImage 函数可以使用图像 URL。

下面是一个将图像添加到 jsPDF 文档的示例，而无需包含原始 base64 代码。它取自 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 的特性。例如源代码，不要从 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 回答