如何在nextjs中使用html2canvas

Question

我在nextjs中使用html2canvas。由于 nextjs 做服务器端呈现，因此很难在nextjs中使用html2canvas。

我使用nextjs提供的动态库导入html2canvas，现在我不知道如何在导入后使用html2canvas函数，如html2画布的文档所写。

进口html2canvas

const html2canvas = dynamic(() => import('html2canvas'),{ssr:false})

当我按照用doc编写的步骤运行下面的步骤时，错误的输出如下

"html2canvas不是一个函数“

html2canvas(document.body).then(function(canvas) {
    document.body.appendChild(canvas);
});

我想知道我怎么用它。

Answer 1

Nextjs动态导入用于导入react组件。如果要导入节点模块，可以使用基于普通javascript的动态导入，如下所示

import('html2canvas').then(html2canvas => {
  html2canvas.default(document.body).then(canvas => 
    document.body.appendChild(canvas)
  )
}).catch(e => {console("load failed")})