angular二维码生成以及下载_angular 生成二维码带logo 并且可以下载-CSDN博客

本文链接：https://blog.csdn.net/xiyu_webSE/article/details/124884973

本文探讨了在项目中遇到的长链接二维码居中问题，比较了ng-alain和angular-qrious插件的解决方案，分享了调整下载方法的过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近在做的项目中，有一个扫描二维码以及下载二维码的功能。之前的实现是采用ng-alain的qr二维码功能，用法如下，按照官方文档链接操作即可。

本来没什么问题，就在最近，发现了一个bug:就是当链接过长时,二维码未居中，偏向左上角,如下如下图所示：

下载没有问题，按照此种方法生成的二维码下载原理就是通过id获取到界面上生成的图片进行下载，顺便附上下载的方法：

   <div id="qrious">
      <qr [value]="value" [size]="220" style="border: 1px solid #999"></qr>
      <a style="display: block;margin-top: 10px;text-align: center;" href="javascript:;" (click)="downloadImg()">下载</a>
    </div>

  downloadImg() {
    const qriousImg: any = document.getElementById('qriousImg');
    const img = qriousImg.getElementsByTagName('img')[0];
    const link = document.createElement('a');
    const url: any = img.getAttribute('src');
    link.setAttribute('href', url);
    link.setAttribute('download', '1.png');
    link.click();
  }

尝试过各种方法，并未找到合适的解决方法。因此决定换一种插件试试，angular-qrious,这种插件是可以居中显示的，按照官方文档链接步骤操作:

总算是临时解决了这个问题

此种插件的下载方法是通过id将生成的canvas转换成图片，进行下载顺便附上下载的方法：

  <div id="qriousCanvas">
      <qr-code [value]="value" [size]="220" style="border: 1px solid #999"></qr-code>
      <a style="display: block;margin-top: 10px;text-align: center;" href="javascript:;"
        (click)="downloadCanvas()">下载</a>
    </div>

  downloadCanvas() {
    const qriousCanvas: any = document.getElementById('qriousCanvas');
    const canvas = qriousCanvas
      .getElementsByTagName('canvas')[0]
      .toDataURL('image/png');
    const link = document.createElement('a');
    link.setAttribute('href', canvas);
    link.setAttribute('download', '2.png');
    link.click();
  }

若各位大神，还有别的解决方法，还请多多指教。