html - 在 NodejS 中创建包含链接的二维码

Question

我现在正在做一个项目，我需要在 NodeJS 中创建一个包含特定信息的二维码。我首先在 HTML 中创建 Canvas ，然后在 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: 文档未定义

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

谢谢你的帮助

Answer 1

document是浏览器特定的全局对象，你不能在node中访问它

在node环境下，您可以生成带有二维码的图像并使用它。

例子:

异步/等待风格:

const fs = require('fs');
const qrcode = require('qrcode');

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

promise 风格:

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);
// ...

Note: It's a simplified example. Please check ejs docs for more details