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屋！