时间戳

首页 > 解决方案 > 如何在 nextjs 中使用 html2canvas

reactjs - 如何在 nextjs 中使用 html2canvas

问题描述

我在 nextjs 中使用html2canvas。由于nextjs 进行服务器端渲染，因此很难在 nextjs 中使用html2canvas。
我使用nextjs提供的动态库导入html2canvas，现在不知道如何使用html2canvas文档中写的导入后的html2canvas函数。

导入html2canvas

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

当我按照文档中所写的步骤运行时，错误输出显示

“html2canvas 不是函数”

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

我想知道如何使用它。

标签： reactjsfrontendnext.jshtml2canvas

解决方案

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

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

推荐阅读