如何用jsPDF在Chart JS中导出图表为PDF？导出失败求助

问题说明 #

尝试将Chart.js生成的柱状图导出为PDF，但始终无法成功，实现功能的JavaScript代码存在多处问题，请求技术帮助。

相关代码 #

HTML代码 #

<div class="card">
    <div class="header">
        <h2>Bar Chart</h2>                            
    </div>
    <div class="body" id="myChart">
        <div class="sales-bars-chart" style="height: 320px;"> </div>
    </div>
</div>

JavaScript代码 #

const myChart = new chart(
    document.getElementById('myChart'),
    config
);

function downloadPDF(){
    const convas = document.getElementById('myChart');

    const canvasImage = convas.toDataURL('image/jpeg', 1.0);
    console.log(canvasImage)
    let pdf = new jsPDF();
    pdf.setFontsize();
    pdf.setFontsize(20);
    pdf.addImage(canvasImage, 'jpeg', 15,15,280,150);
    pdf.save('salerecoed.pdf');
}

错误分析与修复方案 #

以下是代码中的核心问题及对应修复：

• Chart实例化错误：Chart.js的构造函数首字母必须大写，new chart()要改为new Chart()，否则会找不到构造函数。
• 获取元素错误：id="myChart"是外层div容器，而非Chart.js渲染出的canvas元素。Chart.js会在目标容器内自动创建canvas，正确做法是从Chart实例中获取canvas，或通过容器查找内部canvas：

  // 方式1：从Chart实例获取
  const canvas = myChart.canvas;
  // 方式2：从容器内部查找
  const canvas = document.querySelector('#myChart canvas');
  

• 拼写错误：convas拼写错误，应为canvas；jsPDF的setFontsize()方法名错误，正确写法是setFontSize()（首字母大写的S）。
• 无效方法调用：pdf.setFontsize();无参数传入，属于无效调用，直接删除即可。
• 文件名拼写错误：salerecoed.pdf应修正为salerecord.pdf。
• PDF尺寸适配：jsPDF默认A4纸宽度为595像素，建议根据canvas比例计算PDF内图片尺寸，避免内容超出页面。

修复后的完整JavaScript代码 #

// 修正Chart构造函数首字母，同时直接指向图表容器而非外层div
const myChart = new Chart(
    document.querySelector('.sales-bars-chart'),
    config
);

function downloadPDF(){
    // 从Chart实例获取正确的canvas元素
    const canvas = myChart.canvas;
    // 生成图片数据URL
    const canvasImage = canvas.toDataURL('image/jpeg', 1.0);
    
    let pdf = new jsPDF();
    pdf.setFontSize(20);
    // 按canvas比例计算PDF内图片尺寸，适配A4纸
    const pdfWidth = 180;
    const pdfHeight = (canvas.height / canvas.width) * pdfWidth;
    pdf.addImage(canvasImage, 'JPEG', 15, 15, pdfWidth, pdfHeight);
    pdf.save('salerecord.pdf');
}

额外注意事项 #

1. 确保已正确引入Chart.js和jsPDF的资源文件，且加载顺序正确（先加载Chart.js，再加载业务代码）。
2. 需等待图表完全渲染后再调用导出函数，可借助Chart的onComplete回调，或确保按钮点击时图表已渲染完毕。

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