WEB 端生成 QR 码并下载本文将详细阐述如何在Web端生成 QR 码，并提供一个下载链接，使用户能够轻松下载所需的

在数字化迅速发展的今天，二维码（QR Code）作为一种便捷的信息传递方式，被广泛应用于各种场景。本文将详细阐述如何在Web端生成QR码，并提供一个下载链接，使用户能够轻松下载所需的QR码图片。

一、二维码简介

二维码是一种通过特定的几何图形按一定规律分布组成的黑白相间的图形，能够快速被智能设备的摄像头识别并解码，从而获取其中所存储的信息。它具有信息量大、纠错能力强、生成简单等特点。

二、技术选型

要在Web端生成QR码，我们需要以下技术：

HTML/CSS：构建基本的页面结构和样式。
JavaScript：实现QR码的生成和下载逻辑。
QR码生成库：如qrcode.react，一个基于React的QR码生成库，简化了QR码的生成过程。

三、环境搭建

首先，确保你的项目中已经安装了qrcode.react库。如果尚未安装，可以通过npm或yarn进行安装：

npm install qrcode.react

或者

yarn add qrcode.react

四、生成QR码

在React组件中，使用qrcode.react库生成QR码。以下是一个简单的示例，展示如何在组件中嵌入QR码生成逻辑：

import QRCode from 'qrcode.react';

const columns = [
  {
    title: 'QR',
    key: 'QR',
    render: (_some, row) => {
      return (
        <div style={{ display: 'none' }}>
          <QRCode
            id={`QRForServiceList${row.id}`}
            value={'http://www.baidu.com'} 
            fgColor="#000"
            size={100}
            level="H"
          />
        </div>
      );
    },
  },
  // ...其他列定义
];

五、实现下载功能

生成QR码后，我们需要实现一个下载功能。这可以通过HTML5的Canvas和Blob对象完成。以下是一个实现下载功能的JavaScript示例：

<a
  style={{ color: '#1890ff' }}
  onClick={() => {
    const { id } = row;
    const canvas = document.getElementById(`QRForServiceList${id}`);
    canvas.toBlob(function(blob) {
      const downloadUrl = URL.createObjectURL(blob);
      const a = document.createElement('a');
      a.href = downloadUrl;
      a.download = `${row.affiliatedFacility} - ${row.merchantName} QR Code`;
      document.body.appendChild(a);
      a.click();
      document.body.removeChild(a);
      window.URL.revokeObjectURL(downloadUrl);
    }, 'image/png');
  }}
>
  Download QR Code
</a>

代码详解：

const { id } = row;

这行代码从React的row对象中解构出id属性。row对象通常包含了表格中一行的数据，id是当前行数据的唯一标识符。

const canvas = document.getElementById(`QRForServiceList${id}`);

document.getElementById：这是一个JavaScript方法，用于通过元素的ID获取该元素。
QRForServiceList${id}：这是通过模板字符串动态生成的ID，其中id是每行数据的唯一标识符。

canvas.toBlob(function(blob) {
  // ...
}, 'image/png');

canvas.toBlob：这个方法将Canvas的图像内容转换为一个Blob对象，Blob对象可以用于存储二进制数据。
function(blob) { ... }：这是一个回调函数，当toBlob操作完成时，会执行这个函数。
'image/png'：这是指定导出图片的格式为PNG。

const downloadUrl = URL.createObjectURL(blob);

URL.createObjectURL：这个方法创建一个可以用于引用Blob或File对象的DOMString（字符串）。

const a = document.createElement('a');
a.href = downloadUrl;

创建一个新的<a>元素，用于设置下载链接。
a.href = downloadUrl;：设置这个链接的href属性为我们刚刚创建的下载URL。

a.download = `${row.affiliatedFacility} - ${row.merchantName} QR Code`;

a.download：这个属性指定了下载文件的名称。
${row.affiliatedFacility} - ${row.merchantName} QR Code：这是一个模板字符串，用于生成文件名，其中包含了当前行数据的affiliatedFacility和merchantName字段。

document.body.appendChild(a);
a.click();
document.body.removeChild(a);

这三行代码模拟了一个点击事件来触发文件的下载。
首先，将<a>元素添加到文档的body中。
然后，调用a.click()来模拟用户点击链接。
最后，将<a>元素从文档中移除。

window.URL.revokeObjectURL(downloadUrl);

URL.revokeObjectURL：这个方法用于释放通过URL.createObjectURL()创建的URL对象。
这行代码是必要的，因为它可以帮助浏览器释放与Blob对象关联的内存。

原理：通过id找到对应的 Canvas 元素，将 Canvas 内容转换为 Blob 对象，创建一个下载链接，然后模拟点击这个链接来下载 Canvas 中的图像。最后，释放创建的 URL 对象以避免内存泄漏。

六、扩展 -- window.URL.revokeObjectURL

window.URL.revokeObjectURL 是一个非常重要的函数，它的作用是撤销之前通过 URL.createObjectURL() 创建的对象 URL。在使用 URL.createObjectURL() 创建的 URL 引用了 Blob 或 File 对象后，浏览器会保持对这些对象的引用，即使这些对象在页面上已经不再被使用。

为什么需要 `revokeObjectURL`

内存管理：当页面上不再需要这些对象时，如果不手动释放这些引用，浏览器可能不会立即回收这些对象占用的内存。使用 revokeObjectURL 可以明确告诉浏览器这些对象不再被使用，从而帮助浏览器进行垃圾回收。
安全：如果对象 URL 被用于敏感数据，撤销这些 URL 可以防止恶意用户通过这些 URL 访问这些数据。
性能：保持对不再需要的资源的引用可能会导致内存占用增加，影响页面性能。

如何使用 `revokeObjectURL`

使用 revokeObjectURL 通常在不再需要使用对象 URL 时进行。例如，在用户下载完文件后：

const blob = new Blob([/* data */], { type: 'image/png' });
const downloadUrl = URL.createObjectURL(blob);

// 用户下载文件的代码...

// 下载完成后撤销 URL
window.URL.revokeObjectURL(downloadUrl);

及时撤销：一旦确定不再需要通过 createObjectURL 创建的 URL，应尽快调用 revokeObjectURL。
单一引用：revokeObjectURL 只能撤销通过 createObjectURL 创建的 URL。如果同一 URL 被多次使用，需要确保在所有使用完毕后再调用 revokeObjectURL。
异步撤销：revokeObjectURL 的调用是异步的，浏览器可能不会立即释放资源。因此，如果需要确保资源被释放，应该在调用 revokeObjectURL 后检查内存使用情况。
页面卸载：在页面卸载或组件销毁时，确保调用 revokeObjectURL 来释放资源。
错误处理：如果尝试撤销一个不存在的 URL，revokeObjectURL 不会抛出错误，它会静默失败。

通过合理使用 URL.revokeObjectURL，开发者可以更有效地管理页面的内存使用，提高应用的性能和用户体验。

七、整合与测试

将上述生成QR码的组件和下载功能整合到一起，确保它们能够在实际的Web页面中正常工作。进行充分的测试，包括但不限于：

QR码是否能正确生成并显示。
下载链接是否能正确创建并触发下载。
不同设备和浏览器上的兼容性测试。

注意事项

确保生成QR码的数据是安全的，避免敏感信息泄露。
考虑用户体验，提供清晰的下载提示和文件命名。
留意不同设备和浏览器的兼容性问题，确保功能的广泛适用性。

通过遵循本文介绍的步骤和注意事项，你可以轻松地在Web端实现QR码的生成和下载，为用户提供一个便捷、高效的服务。

WEB 端生成 QR 码并下载