Javascript 如何将整个div传递给XEPOnline.js库，而不仅仅是第一个svg元素？_Javascript_Css_Pdf_Svg_Plotly

Javascript 如何将整个div传递给XEPOnline.js库，而不仅仅是第一个svg元素？

javascript css pdf svg

Javascript 如何将整个div传递给XEPOnline.js库，而不仅仅是第一个svg元素？,javascript,css,pdf,svg,plotly,Javascript,Css,Pdf,Svg,Plotly,我正在使用css2pdf@cloudformatter将my plotly.js svg导出为pdf。它工作得很好，但它不会导出热图的色条。我使用“srctype:'svg'”选项将svg保存为与我网站上的格式完全相同的格式。请看一下小提琴以下是脚本： <script src="https://cdn.plot.ly/plotly-latest.min.js"></script> <script src="http://www.cloudformatter.com

我正在使用css2pdf@cloudformatter将my plotly.js svg导出为pdf。它工作得很好，但它不会导出热图的色条。我使用“srctype:'svg'”选项将svg保存为与我网站上的格式完全相同的格式。请看一下小提琴

以下是脚本：

<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<script src="http://www.cloudformatter.com/Resources/Pages/CSS2Pdf/Script/xeponline.jqplugin.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<body>
<br><br>
<!-- Source and on-click event for plotly.js -->
<div id="plotly_chart" style="width: 90%; height: 270px"></div>
<button onclick="return xepOnline.Formatter.Format('plotly_chart',{render:'download',srctype:'svg' });">Get  PDF</button>

<script type="text/javascript">
Chart = document.getElementById('plotly_chart');

var data = [
{
z: [[1, 20, 30], [20, 1, 60], [30, 60, 1]],
type: 'heatmap'
}
];

Plotly.newPlot('plotly_chart', data);
</script>

感谢您在这个问题上的帮助

您已经知道如何不仅仅渲染第一个svg。颜色条位置的问题可能是某些浮动/位置css在打印中不起作用。我会检查一下的。谢谢。我试图将colorbar从div的第二个svg元素移动到第一个svg元素，方法是根据它的类名（colorbar=document.getElementById（“plotly_chart”）.className=“infolayer”）选择它并将其附加到第一个svg中，但这会把整个事情搞砸。但原则上这可能是另一种选择，人们仍然可以使用srctype:'svg'选项？

var colorbar = {
   title: test,
   titlefont: {
     size: 12,
   },
   titleside: "top",
   thickness: 20,
   nticks: ticknumber,
   tickfont: {
     size:10.5
   },
   outlinewidth: 0,
   xpad: 1,
   ypad:3
   };    
Plotly.newPlot('plotly_chart', data).append("colorbar");