HTML DIV导出为pdf& jquery或Javascript的jpg [英] HTML DIV export to pdf & jpg by Jquery or Javascript
问题描述
我正在使用JQplot绘制巴士时间表的斜率和平面图(折线图)。
图表组件是在DIV中创建的,我有div id。
根据我的要求,绘制的图形必须导出为JPEG和PDF。是否有任何JavaScript库或Jquery UI通过传递div id作为参数,它将div区域导出为JPEG和PDF文件。
任何解决方案都将受到赞赏。
I am using JQplot for drawing Slope & Flat Chart (line graph) for Bus Time Table.
The chart component is created inside a DIV, And I have the div id.
According to my requirement the plotted graph has to be export into JPEG & PDF. Is there any JavaScript library or Jquery UI by passing the div id as parameter and it exports the div area to a JPEG & PDF file.
Any solution would be appreciated.
推荐答案
您好,快速查看此页面后: http://www.jqplot .com / tests / line-charts.php [ ^ 似乎图形被绘制在画布上。
如果您的图表也是如此,那么我认为您可能是1 / 2的方式。也就是说,如果你得到canvas元素,你可以调用它上面的dataURL。这将返回图像的base64编码版本。您可以将此设置为img的来源。一旦它是一个图像,而不仅仅是一个画布,你可以保存它。
见这里:
toDataURL方法 [ ^ ]
例如,如果你打开我链接的页面,你可以找到正确的元素并给它一个id。完成后,在控制台中输入以下内容将在页面上插入一个全新的图像。
Hi, after a quick look at this page: http://www.jqplot.com/tests/line-charts.php[^] it seems that the graphs are drawn onto a canvas.
If that's the case with your graph too, then I think you're possibly 1/2 of the way there. That is to say, if you get the canvas element, you can call toDataURL on it. This will return a base64 encoded version of the image. You can the set this as an img's source. Once it's an an image and not just a canvas, you can save it.
See here:
toDataURL method[^]
As an example, if you open the page I linked to, you can find the correct element and give it an id. Once this is done, entering the following into the console will insert a brand-new image onto the page.
{ var img=new Image; img.src = document.getElementById('mTgt3').toDataURL(); document.body.appendChild(img);}
尽可能可能会说,我花了几个时间去研究一下正确的元素是什么。
这些图形由堆叠在每个上面的许多画布元素组成。其他 - 每个人只是做一部分工作。我最终选择的那个是持有蓝色数据线的那个。
我最终使用的元素就是这个 - (它是第一个图形的画布)在页面上):
As you can probably tell, it took me a couple of goes to work out what the correct element was.
The graphs are made up of a number of canvas elements stacked ontop of each other - each one just doing part of the job. The one I ended up choosing was the one that holds the blue data line.
The element I ended up using was this one - (its a canvas for the first graph on the page):
<canvas width="468" height="262" style="position: absolute; left: 22px; top: 10px; " class="jqplot-series-canvas" id="mTgt3"></canvas>
注意mTgt3的ID - 我添加了右键单击Crome开发工具的Elements选项卡中的元素并添加属性。
Note the id of mTgt3 - I added that by right-clicking the element in the Elements tab of Crome's dev tools and Add Attribute.
这篇关于HTML DIV导出为pdf& jquery或Javascript的jpg的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!