Javascript 如何将页面内容导出为jpg或pdf格式，并带有高图表和可滚动数据？

我有一个包含一些数据和一些图表的页面。Highcharts具有一些奇妙的功能，可以将图表导出为图像。如何包含要与图表一起导出的表或div的内容，以便有一个包含图表和数据的大图像或pdf？ 到目前为止，我所做的尝试（没有一个是理想的）是：

html2canvas似乎是最好的解决方案，但似乎不包括Highcarts。也许我做错了什么，因为文档似乎不太好，而且我一直无法从目瞪口呆中找到任何包括图表在内的好例子

我遇到的第二个最好的解决方案是将数据包含在图表中。例如： 这可能会起作用，但会破坏页面上的当前格式。换句话说，这将是一个丑陋的解决方案：）

我发现的其他解决方案与屏幕截图有关，但这无法捕获整个页面

---

可能存在也可能不存在的理想解决方案是，以某种方式使用JavaScript将div或table与Highchart组合成pdf或jpg，这可能吗？如果可能，我在哪里可以找到一个示例？

将本机Highcharts导出功能与html2canvas组合如何

首先，将海图导出到文件中。我猜，知道你必须调用的URL以获取图像就足够了

其次，您可以使用标准的html2canvas魔术生成一个没有图表的文档。（您可能需要使用图表指定div的宽度和高度，以便它不会在导出的文件中折叠）

---

最后，您可以使用gd或imagemagick将一个粘贴到另一个上并返回到客户端。

如何将本机Highcharts导出功能与html2canvas相结合

首先，将海图导出到文件中。我猜，知道你必须调用的URL以获取图像就足够了

其次，您可以使用标准的html2canvas魔术生成一个没有图表的文档。（您可能需要使用图表指定div的宽度和高度，以便它不会在导出的文件中折叠）

---

最后，您可以使用gd或imagemagick将一个粘贴到另一个上并返回给客户端。

很简单，您可以使用此代码捕获特定区域的屏幕截图 您必须在html2canvas中定义div id。我在这里使用的是2 div-：

div id=“汽车”
div id=“chartContainer”
如果您只想捕获汽车，请使用汽车我在这里捕获汽车，您可以更改图表容器以捕获图形 html2canvas（$（'car'） 复制并粘贴此代码

window.onload=函数（）{
var chart=new CanvasJS.chart（“chartContainer”{
animationEnabled：没错，
主题：“light2”，
标题：{
正文：“简单折线图”
},
axisY：{
包括：错
},
数据：[{
键入：“行”，
数据点：[
{y:450}，
{y:414}，
{y:520，索引标签：“最高”，标记颜色：“红色”，标记类型：“三角形”}，
{y:460}，
{y:450}，
{y:500}，
{y:480}，
{y:480}，
{y:410，indexLabel:“最低”，markerColor:“深灰色”，markerType:“交叉”}，
{y:500}，
{y:480}，
{y:510}
]
}]
});
chart.render（）；
}


>
函数gensscreenshotgraph（）
{
html2canvas（$（'car'）{
onrendered：函数（画布）{
var imgData=canvas.toDataURL（“image/jpeg”）；
var pdf=新的jsPDF（）；
pdf.addImage（imgData，'JPEG'，0,0，-180，-180）；
pdf.save（“download.pdf”）；
}
});
}

很简单，您可以使用此代码捕获特定区域的屏幕截图 您必须在html2canvas中定义div id。我在这里使用的是2 div-：

div id=“汽车”
div id=“chartContainer”
如果您只想捕获汽车，请使用汽车我在这里捕获汽车，您可以更改图表容器以捕获图形 html2canvas（$（'car'） 复制并粘贴此代码

window.onload=函数（）{
var chart=new CanvasJS.chart（“chartContainer”{
animationEnabled：没错，
主题：“light2”，
标题：{
正文：“简单折线图”
},
axisY：{
包括：错
},
数据：[{
键入：“行”，
数据点：[
{y:450}，
{y:414}，
{y:520，索引标签：“最高”，标记颜色：“红色”，标记类型：“三角形”}，
{y:460}，
{y:450}，
{y:500}，
{y:480}，
{y:480}，
{y:410，indexLabel:“最低”，markerColor:“深灰色”，markerType:“交叉”}，
{y:500}，
{y:480}，
{y:510}
]
}]
});
chart.render（）；
}


>
函数gensscreenshotgraph（）
{
html2canvas（$（'car'）{
onrendered：函数（画布）{
var imgData=canvas.toDataURL（“image/jpeg”）；
var pdf=新的jsPDF（）；
pdf.addImage（imgData，'JPEG'，0,0，-180，-180）；
pdf.save（“download.pdf”）；
}
});
}

看一看hello我在angularjs中也使用了highcharts，我也在寻找pdf文件中的导出数据，但我单击下载pdf格式，而不是获取pdf格式文件中的数据，但那时候也重定向到其他链接“”此链接是如此，如何停止此重定向