HTML图表导出PDF仅显示文本，求完整导出技术方案

你当前使用jsPDF.fromHTML()导出图表失败的核心原因是：该方法仅能解析静态HTML节点内容，而页面中的图表（通常是通过Canvas或SVG动态渲染生成，比如ECharts、Highcharts等库）并不存在于innerHTML的静态结构中，只会保留图表的容器骨架，所以导出后只有文本。

方案一：通用解决方案（html2canvas + jsPDF） #

利用html2canvas将目标DOM容器（包括动态渲染的图表）完整渲染为Canvas图片，再将图片导入jsPDF完成导出，这是适配绝大多数图表场景的通用方案。

完整代码示例： #

<div>
    <div id="line_top_x"></div>
    <button onclick="generatePDF()">Export to PDF</button>
    <!-- 引入依赖库 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
</div>

<script>
async function generatePDF() {
    // 获取目标容器
    const chartContainer = document.getElementById("line_top_x");
    // 将容器渲染为Canvas（scale参数提升导出清晰度）
    const canvas = await html2canvas(chartContainer, { scale: 2 });
    // 将Canvas转为图片URL
    const imgData = canvas.toDataURL("image/png");
    
    // 初始化jsPDF
    const pdf = new jspdf.jsPDF("p", "mm", "a4");
    // 计算图片在PDF中的尺寸（保持宽高比，留边距）
    const pageWidth = pdf.internal.pageSize.getWidth();
    const imgWidth = pageWidth - 30;
    const imgHeight = (canvas.height * imgWidth) / canvas.width;
    
    // 添加图片到PDF
    pdf.addImage(imgData, "PNG", 15, 15, imgWidth, imgHeight);
    // 保存PDF
    pdf.save('line_top_x.pdf');
}
</script>

方案二：针对特定图表库的优化方案（以ECharts为例） #

如果你的图表是用ECharts生成的，可以直接使用ECharts自带的getDataURL方法获取图表的图片数据，无需依赖html2canvas，性能更优：

function generatePDF() {
    const chart = echarts.getInstanceByDom(document.getElementById("line_top_x"));
    // 获取高清图表图片数据
    const imgData = chart.getDataURL({
        pixelRatio: 2,
        backgroundColor: "#fff"
    });
    
    const pdf = new jspdf.jsPDF("p", "mm", "a4");
    const pageWidth = pdf.internal.pageSize.getWidth();
    const imgWidth = pageWidth - 30;
    const imgHeight = (chart.getHeight() * imgWidth) / chart.getWidth();
    
    pdf.addImage(imgData, "PNG", 15, 15, imgWidth, imgHeight);
    pdf.save('line_top_x.pdf');
}

关键说明 #

• 调整scale或pixelRatio参数为2及以上，可提升导出PDF的清晰度
• 若需导出整页或多个元素，只需将html2canvas的目标DOM改为对应父容器即可

内容的提问来源于stack exchange，提问作者Nwp _