将批次图另存为 PDF
Save Flot Chart as PDF
我正在尝试将整个flot(饼图/条形图)图保存为PDF。我正在使用jQuery/FLOT绘制饼图和条形图。
我有将flotchart下载为PDF的代码,但是我在一页中有三个图表,问题是一旦我单击下载,它们就会打印在页面中,同时我将它们分别以不同的PDF格式获取。我的问题是是否可以将它们全部放在一个 pdf 中而不在页面中打印它们。
知道吗?
谢谢。
这是我的代码:
<div id="container" style="width:330px;height:330px"></div>
<a id="toPdf">Download as PDF </a>
var _canvas = null;
$(function() {
$.plot($("#container"), [ { label: 'Test', data: [[0, 0], [1, 9]] } ], { yaxis: { max: 1 } });
$("#toPdf").on("click", function(e) {
e.preventDefault();
html2canvas($("#container").get(0), {
onrendered: function(canvas) {
document.body.appendChild(canvas);
var imgData = canvas.toDataURL('image/png');
console.log('Report Image URL: '+imgData);
var doc = new jsPDF('landscape');
doc.addImage(imgData, 'PNG', 10, 10, 190, 95);
doc.save('testingPDF.pdf');
}
});
});
});
您是否尝试过在工作完成后移除画布?
$(function() {
$.plot($("#container"), [ { label: 'Test', data: [[0, 0], [1, 9]] } ], { yaxis: { max: 1 } });
$("#toPdf").on("click", function(e) {
e.preventDefault();
html2canvas($("#container").get(0), {
onrendered: function(canvas) {
document.body.appendChild(canvas);
var imgData = canvas.toDataURL('image/png');
console.log('Report Image URL: '+imgData);
var doc = new jsPDF('landscape');
doc.addImage(imgData, 'PNG', 10, 10, 190, 95);
doc.save('testingPDF.pdf');
document.body.removeChild(canvas); // newly added line
}
});
});
});
更新
看看这个新的小提琴(你想要一些链接吗?
.HTML
<div class="container1" style="width:330px;height:330px"></div>
<div class="container2" style="width:330px;height:330px"></div>
<div class="container3" style="width:330px;height:330px"></div>
<a id="toPdf">Generate to pdf </a>
法典
var _canvas = null;
$(function () {
$.plot($(".container1"), [{
label: 'Testing1',
data: [
[0, 0],
[1, 9]
]
}], {
yaxis: {
max: 1
}
});
$.plot($(".container2"), [{
label: 'Testing2',
data: [
[0, 0],
[1, 9]
]
}], {
yaxis: {
max: 1
}
});
$.plot($(".container3"), [{
label: 'Testing3',
data: [
[0, 0],
[1, 9]
]
}], {
yaxis: {
max: 1
}
});
window.allcanvas = [];
$("#toPdf").on("click", function (e) {
e.preventDefault();
var allcontainers = $('[class^="container"]');
allcontainers.each(function (index, elem) {
html2canvas($(elem).get(0), {
onrendered: function (canvas) {
window.allcanvas.push(canvas);
if(allcontainers.length == allcanvas.length){
finalpdf();
}
}
});
});
});
finalpdf = function(){
var doc = new jsPDF('landscape');
for(var i = 0; i<allcanvas.length;i++){
var imgData = allcanvas[i].toDataURL('image/jpeg');
doc.addImage(imgData, 'JPEG', 10, 10, 190, 95);
if(i != allcanvas.length-1)
doc.addPage();
}
doc.save('testingPDF.pdf');
};
});
相关文章:
- 无法在本地计算机中将画布另存为图像
- 如何将 html5 画布另存为窗口 8 Metro 应用程序中的图像文件
- 试图制作一个“;另存为“;使用php's”;file_put_contents”;和javascript&quo
- Safari浏览器上的“强制另存为”对话框
- 强制浏览器打开“;另存为“;对话框
- execCommand('另存为',true,'data.csv');不在IE工作
- 更改音频速度,然后另存为新文件
- 将响应另存为文件
- 覆盖 HTML 画布上的“另存为”行为
- 如何在浏览器中触发另存为对话框,以便可以在内存中保存 json 数据
- 更改“将图像另存为”的操作以重定向到相应的网页
- 如何为图像创建“另存为”按钮
- 将 JavaScript 对象另存为字符串
- 将文件另存为.pdf或.doc
- 将 HTML5 页面另存为 PDF
- 将批次图另存为 PDF
- 需要使用 JSPDF 和自动表 JS 使用另存为弹出窗口将 PDF 保存到本地驱动器,同时将 HTML 表数据导出为 P
- 将批量饼图另存为 PDF
- 另存为PDF 2页
- 另存为PDF:推荐一种从客户端接收原始数据并将PDF发送回客户端的服务器解决方案