javascript jsPDF 添加图表
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14185778/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jsPDF add chart
提问by Anton Gildebrand
I am using jsPDF to generate PDF documents through Appcelerator's Titanium. Now i need to add a simple pie chart with two segments. How could i do that in simplest way?
我正在使用 jsPDF 通过 Appcelerator 的 Titanium 生成 PDF 文档。现在我需要添加一个包含两个部分的简单饼图。我怎么能以最简单的方式做到这一点？
It doesn't need to be anything fancy. I am thinking about generating an image first, and add that image to the document. Maybe there's a library that could generate images of pie-chart's and save it to the phone. However, im not sure about jsPDF's support of images, i can't seem to find any good documentation of the library.
它不需要任何花哨的东西。我正在考虑先生成一个图像，然后将该图像添加到文档中。也许有一个库可以生成饼图的图像并将其保存到手机中。但是，我不确定 jsPDF 对图像的支持，我似乎找不到该库的任何好的文档。
回答by arsenalist
I know it has been inactive for almost a year, but since it doesn't have an accepted answer, I'll try to answer.
我知道它已经将近一年没有活动了，但由于它没有一个可接受的答案，我会尝试回答。
Adding chart to jsPDF
将图表添加到 jsPDF
1.Convert chart to supported image format (JPEG or PNG encoded in base64) using HTML Canvas.
1. 使用 HTML Canvas 将图表转换为支持的图像格式（以 base64 编码的 JPEG 或 PNG）。
2.Make sure the image URL available to the addImage function.
2. 确保图片 URL 可用于 addImage 函数。
Below is an example to add image to jsPDF doc without having to include raw base64 code. It is taken from jsPDF example.
下面是将图像添加到 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);
}
Good Documentation of jsPDF
jsPDF的好文档
You will learn a lot of jsPDF features from their practical documentation. For example source code, don't download from GitHub, because some files are missing. You can download from here.
您将从他们的实用文档中学到很多 jsPDF 功能。例如源代码，不要从GitHub下载，因为有些文件丢失了。你可以从这里下载。
note:remove semicolon on the 312th line of basic.js to make the code works.
注意：去掉basic.js第312行的分号，使代码生效。
Cheers,...
干杯，...
回答by Jefferson Arrubla
Maybe you can check the jsPDFsite first, you can generate you image with a library (perhaps google chart), save the chart as image and then add to the PDF, using the plugin jspdf.plugin.addimage.jsand some code.
This is an exampletaken from their web site
也许您可以先查看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);
