一体化可下载 HTML 文件，包括来自 nuxt 应用程序的 Chart.js

Question

我的要求是提供一个小型 Nuxt 应用程序，它生成一个简单的 HTML 文件，其中包括一些为我工作的公司的客户提供的服务的概述部分。这里的具体用例是应用程序提供一个可下载的 HTML 文件，并且可以在任何浏览器中再次打开，无论是在线还是离线，都具有 100% 的功能。

这适用于SSR和Nuxt，但是，我在使用chart.js时遇到了一些问题

应用程序的当前状态：通过

nuxi

、三个 Vue 组件生成的超级基本 Nuxt 应用程序。其中一个组件实现了

chart.js

，所有这些都会导致：

但是，当我保存结果文件（

mhtml

或

html

）时，图表部分不会显示。

Chart

组件本质上就是这样：

 methods: {
      renderChart() {
        const ctx = this.$refs.chartCanvas.getContext('2d');
  
        new Chart(ctx, {
          type: 'pie',
          data: {
            labels: ['green', 'red'],
            datasets: [{
              data: [this.green, this.red],
              backgroundColor: ['green', 'red']
            }]
          },
          options: {
            responsive: true,
            maintainAspectRatio: false
          }
        });
      }
    }
  }

在

onMounted

中调用，渲染如下：

<template>
    <div>
      <canvas ref="chartCanvas"></canvas>
    </div>
 </template>
  

我尝试以不同的方式构建应用程序（静态和服务器目标），但这没有帮助。

这是生命周期钩子无法通过 SSR 使用的问题吗？还是我的具体实施有问题？

Answer 1

更简单的方法可能是将画布导出为 datauri，然后使用缓冲区字符串作为下载按钮上的 src。这样您只需将图表导出为 png 或类似格式。听起来你想要制作图表服务器端，然后让它们可供下载，这是实现这一目标的最佳/最明显的方法。