reveal.js 与 plotly.js 和 chart.js 导出 pdf答案

【问题标题】：reveal.js with plotly.js and chart.js export pdfreveal.js 与 plotly.js 和 chart.js 导出 pdf
【发布时间】：2021-09-05 00:58:32
【问题描述】：

我正在使用reveal.js 进行演示。该演示文稿有一些使用plotly.js 和chart.js 的动画情节。出于性能原因，我使用了 addEventListner 以便动画仅在我到达该幻灯片时运行。例如：

Reveal.addEventListener("slide2", function () {
 // plot function here
}

当我使用 ?print-pdf 将幻灯片导出为 pdf 时，所有画布元素都呈现为空白。有没有办法解决这个问题，以便打印的 pdf 至少包含这些动画图的初始或最终帧或任何帧？

here 提出了类似的问题，但该问题与 iframe 元素上的 export-pdf 相关。使用data-preload 禁用延迟加载的建议答案在我的情况下不起作用。

【问题讨论】：

标签： javascript pdf chart.js reveal.js plotly.js

【解决方案1】：

有两种方法，如果您在调用 print pdf 函数后创建图表，您可以将 animation 选项设置为 false 以便图表不会动画并立即显示，并将其设置为 true 正常.您可以采用的另一种方法是进入您的图表变量，然后将 animation 设置为 false 并更新它。

let animate = false; // Option 1, set this variable to the correct value before creating the chart

const options = {
  type: 'line',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
        label: '# of Votes',
        data: [12, 19, 3, 5, 2, 3],
        borderColor: 'orange'
      },
      {
        label: '# of Points',
        data: [7, 11, 5, 8, 3, 7],
        borderColor: 'pink'
      }
    ]
  },
  options: {
    animation: animate
  }
};

const ctx = document.getElementById('chartJSContainer').getContext('2d');
const chart = new Chart(ctx, options);

// Option 2, update the animation mode on the fly
const switchMode = () => {
  chart.options.animation = !chart.options.animation;
}
// Option 2 if you want to make sure at all times it is false for printing
const setAniFalse = () => {
  chart.options.animation = false;
}
// Option 2 if you want to make sure at all times it is true for showing in presentation
const setAniTrue = () => {
  chart.options.animation = true;
}

<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.js"></script>
  <button onClick="switchMode()">
      Switch ani mode
    </button>
</body>

【讨论】：