fix bug

src/app/routes/supply-management/components/qrcode-page/qrcode-page.component.html

@@ -1,18 +1,8 @@
-<!--
- * @Description  : 
- * @Version      : 1.0
- * @Author       : Shiming
- * @Date         : 2021-12-03 11:10:14
- * @LastEditors  : Shiming
- * @LastEditTime : 2022-02-28 20:00:13
- * @FilePath     : \\tms-obc-web\\src\\app\\routes\\supply-management\\components\\qrcode-page\\qrcode-page.component.html
- * Copyright (C) 2022 huzhenhong. All rights reserved.
--->
 <nz-spin *ngIf="!i" class="modal-spin"></nz-spin>
 <div>
   <nz-alert nzType="warning" nzMessage="二维码用于司机扫码抢单" nzShowIcon></nz-alert>
-  <div style="width: 50%;margin: 0 auto;">
-    <div class="">
+  <div style="width: 80%;margin: 0 auto;" id="qr_page">
+    <div style="text-align: center;">
 
       <h2> {{i?.enterpriseInfoName}}</h2>
       <qr [value]="qrCodeValue" #qr></qr>
@@ -23,6 +13,6 @@
 
   </div>
   <div class="modal-footer text-center">
-    <button nz-button type="submit" nzType="primary" (click)="downLoadQrcode('二维码')">下载二维码</button>
+    <button nz-button type="submit" nzType="primary" (click)="toCanvasPhoto()">下载二维码</button>
   </div>
 </div>

src/app/routes/supply-management/components/qrcode-page/qrcode-page.component.ts

@@ -4,7 +4,7 @@
  * @Author       : Shiming
  * @Date         : 2021-12-03 11:10:14
  * @LastEditors  : Shiming
- * @LastEditTime : 2022-02-28 20:00:06
+ * @LastEditTime : 2022-03-01 14:19:47
  * @FilePath     : \\tms-obc-web\\src\\app\\routes\\supply-management\\components\\qrcode-page\\qrcode-page.component.ts
  * Copyright (C) 2022 huzhenhong. All rights reserved.
  */
@@ -13,6 +13,7 @@ import { Component, OnInit, ViewChild } from '@angular/core';
 import { QRComponent } from '@delon/abc/qr';
 import { SFSchema, SFUISchema } from '@delon/form';
 import { NzModalRef } from 'ng-zorro-antd/modal';
+import html2canvas from 'html2canvas';
 
 @Component({
   selector: 'app-supply-management-qrcode-page',
@@ -50,16 +51,22 @@ export class SupplyManagementQrcodePageComponent implements OnInit {
   }
 
 
-  downLoadQrcode(downloadName: any): void {
+  /**
+   * 下载二维码
+   * @param downloadName 文件名
+   * @param contents 内容
+   */
+  downLoadQrcode(downloadName: any, contents: any): void {
     let aLink = document.createElement('a');
-    const content = this.qr.dataURL;
+    const content = contents;
     let blob = this.base64ToBlob(content); //new Blob([content]);
     let evt = document.createEvent("HTMLEvents");
     evt.initEvent("click", true, true);//initEvent 不加后两个参数在IE下会报错  事件类型，是否冒泡，是否阻止浏览器的默认行为
     aLink.download = downloadName;
     aLink.href = URL.createObjectURL(blob);
     // aLink.dispatchEvent(evt);
-    aLink.click()
+    aLink.click();
+
 
   }
 
@@ -80,4 +87,17 @@ export class SupplyManagementQrcodePageComponent implements OnInit {
     this.modal.destroy();
   }
 
+  /**
+   * 把页面装成canvas
+   */
+  toCanvasPhoto() {
+    let aLink = document.createElement('a');
+    html2canvas(document.getElementById('qr_page')!, { height: 340 }).then((canvas:any) => {
+      let url = canvas.toDataURL("image/jpeg");
+      this.downLoadQrcode('二维码', url);
+
+    })
+  }
+
+
 }