如何使用Highcharts和可滚动数据将页面内容导出为jpg或pdf
How do I export the content of a page as either jpg or pdf with Highcharts and scrollable data?
我有一个页面,其中包含一些数据和一些Highcharts。Highcharts具有一些奇妙的功能,可以将图表导出为图像。如何将要导出的表或div的内容包含在图表中,以便有一个包含图表和数据的大图像或pdf?到目前为止,我尝试过的都不是理想的:
html2canvas,似乎是最好的解决方案,但似乎不包括Highcarts。也许我做错了什么,因为文档看起来不太好,而且我一直无法从Goggling中找到任何包括图表在内的好例子。
我遇到的第二个最好的解决方案是将数据包含在Highcharts中。示例位于:http://jsfiddle.net/highcharts/z9zXM/这可以工作,但会破坏页面上的当前格式。换句话说,这将是一个丑陋的解决方案:)。
我发现的其他解决方案与屏幕截图有关,但这不会捕获整个页面。
可能存在也可能不存在的理想解决方案是,以某种方式使用JavaScript将div或表与Highchart组合成pdf或jpg,这可能吗?如果可能,我在哪里可以找到示例?
将本地Highcharts导出功能与html2canvas结合起来怎么样?
首先,将Highcharts导出到一个文件中。我猜知道你必须调用的URL才能获得图像就足够了。
其次,您使用标准的html2canvas魔术来生成一个没有图表的文档。(您可能需要用图表指定div的宽度和高度,这样它就不会在导出的文件中折叠)。
最后,您可以使用gd或imagemagick将一个粘贴到另一个上,并将其提供给客户端。
很简单,您可以使用此代码来捕获特定区域的屏幕截图您必须在html2canvas中定义div id。我在这里使用2div-:
div id="car"
div id="chartContainer"
如果你只想捕获汽车,那么使用car我在这里捕获汽车你可以更改chartContainer来捕获图形html2canvas($('#car')复制并粘贴此代码
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.5/jspdf.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
<script>
window.onload = function () {
var chart = new CanvasJS.Chart("chartContainer", {
animationEnabled: true,
theme: "light2",
title:{
text: "Simple Line Chart"
},
axisY:{
includeZero: false
},
data: [{
type: "line",
dataPoints: [
{ y: 450 },
{ y: 414},
{ y: 520, indexLabel: "highest",markerColor: "red", markerType: "triangle" },
{ y: 460 },
{ y: 450 },
{ y: 500 },
{ y: 480 },
{ y: 480 },
{ y: 410 , indexLabel: "lowest",markerColor: "DarkSlateGrey", markerType: "cross" },
{ y: 500 },
{ y: 480 },
{ y: 510 }
]
}]
});
chart.render();
}
</script>
</head>
<body bgcolor="black">
<div id="wholebody">
<a href="javascript:genScreenshotgraph()"><button style="background:aqua; cursor:pointer">Get Screenshot of Cars onl </button> </a>
<div id="car" align="center">
<i class="fa fa-car" style="font-size:70px;color:red;"></i>
<i class="fa fa-car" style="font-size:60px;color:red;"></i>
<i class="fa fa-car" style="font-size:50px;color:red;"></i>
<i class="fa fa-car" style="font-size:20px;color:red;"></i>
<i class="fa fa-car" style="font-size:50px;color:red;"></i>
<i class="fa fa-car" style="font-size:60px;color:red;"></i>
<i class="fa fa-car" style="font-size:70px;color:red;"></i>
</div>
<br>
<div id="chartContainer" style="height: 370px; width: 100%;"></div>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="box1">
</div>
</div>>
</body>
<script>
function genScreenshotgraph()
{
html2canvas($('#car'), {
onrendered: function(canvas) {
var imgData = canvas.toDataURL("image/jpeg");
var pdf = new jsPDF();
pdf.addImage(imgData, 'JPEG', 0, 0, -180, -180);
pdf.save("download.pdf");
}
});
}
</script>
</html>
- 如何使用javascript或html下载PDF格式的填写表单
- 如何将PDF作为二进制文件传递到window.open()
- javascript.点击显示嵌入的pdf
- Javascript/Jquery Blob not showing Chrome PDF
- 在提交时打开thankyou.html+下载PDF
- 生成pdf或其他非html文件时的错误处理
- how to convert html <div> to pdf
- 将画布转换为pdf:黑色背景
- 加载collada纹理数据(.jpg本身)时对其进行操作
- 无法在Cordova 4.0 ios中将jpg/jpeg图像转换为Base64
- 如何在不在本地下载的情况下将url中提供的文件(pdf/doc)转换为json/string/base64格式
- 以PDF附件的形式通过电子邮件发送谷歌文档
- 将Meteor中的base64 PDF作为电子邮件附件
- 无法执行文件.退出Acrobat PDF中的操作
- Regex&Javascript:忽略wxyz.jpg之前的任何内容
- PDF到JPG的转换器
- 如何使用Highcharts和可滚动数据将页面内容导出为jpg或pdf
- JavaScript for `set('pdf ppt tif tiff jpg jpeg'.spli
- 使用图像id保存图像为png, jpg和pdf
- 打开文件夹中的所有pdf文件,并保存为调整大小的jpg在其他文件夹