Fatal编程技术网
  • pdf/
  • 使用echarts和jspdf将图表转换为pdf

使用echarts和jspdf将图表转换为pdf

pdf

使用echarts和jspdf将图表转换为pdf,pdf,jspdf,echarts,Pdf,Jspdf,Echarts,我已经用echarts创建了一个图形，并希望通过使用jspdf将其包含到pdf中。我认为这样做的一种方法可能是使用画布，将图形传输到图像，最后将图像包含到pdf中。但是，我无法将图形转换为图像。下面是代码： <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> <title>Bal

我已经用echarts创建了一个图形，并希望通过使用jspdf将其包含到pdf中。我认为这样做的一种方法可能是使用画布，将图形传输到图像，最后将图像包含到pdf中。但是，我无法将图形转换为图像。下面是代码：

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
  <title>Balken</title>
     <script src="echarts.js"></script>
<link rel="stylesheet" href="style.css">

  </head>
  <body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.4/jspdf.debug.js"></script>
    <div id="body">
      <div id="chart"></div>
    </div>

         <!-- prepare a DOM container with width and height -->
    <div id="main" style="width: 750px;height:500px;"></div>
    <script type="text/javascript">
        // based on prepared DOM, initialize echarts instance
        var myChart = echarts.init(document.getElementById('main'));

        // specify chart configuration item and data
        var 

option = {
    color: ['#3398DB'],
    tooltip : {
        trigger: 'axis',
        axisPointer : {            
            type : 'shadow'        
        }
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis : [
        {
            type : 'category',
            data : ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
            axisTick: {
                alignWithLabel: true
            }
        }
    ],
    yAxis : [
        {
            type : 'value'
        }
    ],
    series : [
        {
            name:'Salami',
            type:'bar',
            barWidth: '60%',
            data:[10, 52, 200, 334, 390, 330, 220]
        }
    ]
};
        // use configuration item and data specified to show chart
        myChart.setOption(option);

        var canvas = document.getElementById("main");
var dataURL = canvas.toDataURL();

//console.log(dataURL);

$("#exportButton").click(function(){
    var pdf = new jsPDF();
    pdf.addImage(dataURL, 'JPEG', 0, 0);
    pdf.save("download.pdf");
});


   </script>
<button id="exportButton" type="button">Export as PDF</button>

     </body>
</html>


巴尔肯
//基于准备好的DOM，初始化echarts实例
var myChart=echarts.init（document.getElementById（'main'）；
//指定图表配置项和数据
变量
选项={
颜色：['#3398DB']，
工具提示：{
触发器：“轴”，
轴指针：{
类型：“阴影”
}
},
网格：{
左：“3%”，
对:"4%",，
底部：“3%”，
标签：正确
},
xAxis：[
{
类型：'类别'，
数据：[周一、周二、周三、周四、周五、周六、周日]，
axisTick：{
alignWithLabel:true
}
}
],
亚克斯：[
{
类型：“值”
}
],
系列：[
{
姓名：'Salami'，
类型：'bar'，
条形宽度：“60%”，
数据：[10,52,200,334,390,330,220]
}
]
};
//使用指定的配置项和数据显示图表
myChart.setOption（选项）；
var canvas=document.getElementById（“主”）；
var dataURL=canvas.toDataURL（）；
//log（dataURL）；
$（“#导出按钮”）。单击（函数（）{
var pdf=新的jsPDF（）；
pdf.addImage（数据URL，'JPEG'，0,0）；
pdf.save（“download.pdf”）；
});
导出为PDF
有什么建议吗？

我会使用工具箱，另存为图像：

..... toolbox: { feature: { saveAsImage : {show: true} } } ..... ..... 工具箱：{ 特色：{ saveAsImage:{show:true} } } ..... 在所有现有选项中，此选项将显示一个图标，用于将图形另存为图像

奎达里亚·阿斯：

有关工具箱的更多选项：

我希望它能帮助您。

我会使用工具箱，另存为图像：

..... toolbox: { feature: { saveAsImage : {show: true} } } ..... ..... 工具箱：{ 特色：{ saveAsImage:{show:true} } } ..... 在所有现有选项中，此选项将显示一个图标，用于将图形另存为图像

奎达里亚·阿斯：

有关工具箱的更多选项：

我希望它能对您有所帮助。

作为一种商业产品，我也需要它，所以在找到解决方案之前，我没有放弃

您不能使用图表的ID来获取图像的URL，而是需要搜索画布

($('canvas')[0]).toDataURL("image/png");
请注意，“[0]”表示它将为您提供第一个画布，如果您有更多图表，只需执行以下操作：

($('canvas')[0]).toDataURL("image/png");
($('canvas')[1]).toDataURL("image/png");
($('canvas')[2]).toDataURL("image/png");
3小时的搜索和测试时间：）

享受吧

作为一种商业产品，我也需要这个，所以在找到解决方案之前，我没有放弃

您不能使用图表的ID来获取图像的URL，而是需要搜索画布

($('canvas')[0]).toDataURL("image/png");
请注意，“[0]”表示它将为您提供第一个画布，如果您有更多图表，只需执行以下操作：

($('canvas')[0]).toDataURL("image/png");
($('canvas')[1]).toDataURL("image/png");
($('canvas')[2]).toDataURL("image/png");
3小时的搜索和测试时间：）

享受吧

您必须导入“html2canvas”才能使其正常工作。 Html2canvas库将获取快照，该图像应使用jspdf写入pdf

我已经为此创建了一个新的应用程序

$("#exportButton").click(function(){   
html2canvas($("#main"), {
        onrendered: function(canvas) {
           var  dataURL=canvas.toDataURL('image/jpeg');
          var pdf = new jsPDF();
          pdf.addImage(dataURL, 'JPEG', 0, 0);
          pdf.save("download.pdf");
        }
    });
});
您必须导入“html2canvas”才能使其正常工作。 Html2canvas库将获取快照，该图像应使用jspdf写入pdf

我已经为此创建了一个新的应用程序

$("#exportButton").click(function(){   
html2canvas($("#main"), {
        onrendered: function(canvas) {
           var  dataURL=canvas.toDataURL('image/jpeg');
          var pdf = new jsPDF();
          pdf.addImage(dataURL, 'JPEG', 0, 0);
          pdf.save("download.pdf");
        }
    });
});


//$（“#列表1”）。在（“单击”，函数（）{
$（“#列表1”）。单击（函数（）{
$（“#行”）.html（可选）；
var imgData；
var svgElements=$（“#行”）.find（'svg'）；
//用临时画布替换所有SVG
svgElements.each（函数（）{
var，xml；
//canvg无法很好地处理em字体大小，因此请查找计算出的像素大小，并将其替换到元素中。
$.each（$（this）.find（'[style*=em]'）、函数（索引，el）{
$（this.css（'font-size'，getStyle（el，'font-size'））；
});
canvas=document.createElement（“canvas”）；
canvas.className=“screenShotTempCanvas”；
//将SVG转换为XML字符串
xml=（新的XMLSerializer（））.serializeToString（this）；
//IE抛出错误时删除名称空间
xml=xml.replace（/xmlns=\“http:\/\/www\.w3\.org\/2000\/svg\/，”）；
//将SVG绘制到画布上
canvg（canvas，xml）；
$（canvas）.insertAfter（this）；
//隐藏SVG元素
////this.className=“tempHide”；
$（this.attr（'class'，'tempHide'）；
$（this.hide（）；
});
/*html2canvas（$（“#行”）{
onrendered：函数（画布）{
var imgData=canvas.toDataURL(
“图像/png”）；
var doc=新的jsPDF（'p'，'mm'）；
addImage文件（imgData，'PNG'，10,10）；
doc.save（'sample-file.pdf'）；
}
});*/
var imgData；
html2canvas（$（“#行”）{
乌塞科尔斯：没错，
“AllowPaint”：正确，
onrendered：函数（画布）{
imgData=canvas.toDataURL(
“图像/jpeg”，1.0）；
canvaswidth1=canvas.width/2；
画布高度1=画布高度/4；
当前高度=$（“#行”）.height（）；
currentHeight2=currentHeight/2；
var imgWidth=200；
var pageHeight=260；
var imgHeight=canvas.height*imgWidth/canvas.width；
var heightLeft=imgHeight；
var doc=new jsPDF（'p'，'m'，在这里输入代码'm'，'a4'）；
var位置=35；
setFillColor文件（52,73,94）