jsPDF添加图表

Question

我正在使用jsPDF通过Appcelerator's Titanium生成PDF文档。现在我需要添加一个两个部分的简单饼图。有什么最简单的方法吗？

它不需要太复杂。我想先生成一张图片，然后将该图片添加到文档中。也许有一个库可以生成饼图的图片并将其保存到手机上。但是，我不确定jsPDF对图片的支持情况，我找不到任何好的库的文档信息。

- Anton Gildebrand

---

请问您能告诉我您是如何在Titanium中集成jspdf的吗？ - user2185354

Answer 1

我知道这个问题已经不活跃了将近一年，但是既然它没有被接受的答案，我会尝试回答。

向jsPDF添加图表

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

2. 确保将图像URL传递给addImage函数。

以下是一个示例，演示如何向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行上的分号。

干杯...

- arsenalist

Answer 2

也许您可以先查看 jsPDF 网站，您可以使用库（可能是 Google Chart）生成图像，将图表保存为图像，然后使用插件 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);

- Jefferson