在 NodejS 中创建包含链接的 QR 码

Question

我现在正在做一个项目，我需要创建一个包含 NodeJS 中特定信息的 qrcode。我从在HTML中创建画布开始，并在NodeJS中获取它

<canvas id="canvas" width="300" height="300"></canvas>

然后在我的 NodeJS 文件中，我正在启动我的函数

const fs = require('fs');
const qrcode = require('qrcode');
module.exports = {
  generateQr: function(link){
    var canvas = new qrcode(document.getElementById('canvas'));
    qrcode.toCanvas(canvas, link, function (error) {
    if (error) console.error(error)
    console.log('success!');
    });
  }
};

不幸的是，我得到了错误：

ReferenceError: document is not defined

从上面的代码来看，它看起来正确吗？QRCODE是否获取了我正在传递的数据，然后我应该怎么做才能QR码出现在我的HTML中？

谢谢你的帮助

Answer 1

文档是特定于浏览器的全局对象，您无法在 node 中访问它

node环境中，您可以使用二维码生成图像并使用它。

例：

异步/等待样式：

const fs = require('fs');
const qrcode = require('qrcode');
module.exports = {
  generateQr: async link => {
    const qrCodeDataUrl = await qrcode.toDataURL(link);
    // ...
  }
};

承诺风格：

const fs = require('fs');
const qrcode = require('qrcode');
module.exports = {
  generateQr: link => {
    qrcode.toDataURL(link)
       .then(data => {
          const qrCodeDataUrl = data;
          // ...
       })
       .catch(err => {
          console.error(error);
          // ...
       });
  }
};

回调样式：

const fs = require('fs');
const qrcode = require('qrcode');
module.exports = {
  generateQr: link => {
    qrcode.toDataURL(link, function(err, data) {
       if (error) console.error(error);
       const qrCodeDataUrl = data;
       // ...
    });
  }
};

要在 HTML 文件中呈现它，您可以使用您选择的模板引擎：

使用 ejs 的示例：

const ejs = require('ejs');
// In some route
const qrCodeDataUrl = await generateQr('some link');
const html = ejs.render('<img src="<%= qrCodeDataUrl %>" />', {qrCodeDataUrl});
res.header('Content-Type', 'text/html');
res.send(html);
// ...

注意：这是一个简化的示例。请查看 ejs 文档了解更多详情