Dom to Image 插件没有捕获正确的下拉值

问题描述

我在我的 angular 应用程序中使用 dom-to-image 插件来捕获 div 的图片。我可以在任何地方捕获 div，除非 div 中有下拉列表。捕获图像时，我没有得到所选的下拉值。我有一个包含几个选项的下拉列表。每当我拍照时，第一个选项都会被捕获在图片中。

html 代码

 <div class="row" *ngIf="showStatusViolations">
<div class="col-lg-12 mt-3 mb-3 download-wrap position-relative">
  <app-download [chart_name]="'trend on status violations'">
  </app-download>
  <div class="chart-div graph-div open-violations code-vio cc-area-chart" style="height: 430px">
    <div class="row">
      <div class="col-md-12">
        <h5 class="text-center graph-heading mb-0 pb-0 pt-3">Trend on status of (High/Medium) Violations</h5>

      </div>
    </div>
    <div class="row">
      <div class="col-md-3 ml-auto">
        <div class="form-group mt-1 mr-2">
          <select class="form-control" id="sel2" [(ngModel)]="selectedStatus" (change)="selectedStatusTrendViolation($event.target.value)">
            <option value="daily">Daily</option>
            <option value="weekly">Weekly</option>
            <option value="monthly">Monthly</option>
            <option value="quarterly">Quarterly</option>
          </select>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="multi-line-chart-width" style="width: 95%; margin: 0 auto">
        <div class="legend text-center d-flex justify-content-center mb-2" style="width: 
          100%" *ngIf="statusViolations !== null && statusViolations.length !== 0">
          <div class="legend-value">
            <div class="violet mr-1"></div>
            <span>New</span>
          </div>
          <div class="legend-value">
            <div class="blue mr-1"></div>
            <span> Triaged</span>
          </div>
          <div class="legend-value">
            <div class="green mr-1"></div>
            <span> Closed</span>
          </div>
        </div>

        <div style="width: 90%; margin: 0 auto" *ngIf="showOpen">
          <app-ngx-line-resp *ngIf="statusViolations" 
          [chartWidth]="opnViolationGraphDimension" [data]="statusViolations"></app-ngx- 
        line-resp>

        </div>
        <div class="no_datas" *ngIf="statusViolations.length === 0">
          <h5> No Data Available</h5>
        </div>
      </div>
    </div>

  </div>
</div>

app-download.ts

import { Component,OnInit,Input } from '@angular/core';
import { Utils } from 'src/app/common/pipes/utility';

@Component({
selector: 'app-download',templateUrl: './download.component.html',styleUrls: ['./download.component.css']
})

export class DownloadComponent implements OnInit {
@input() chart_name: any
@input() data:any
temp_arr:any =[]

constructor(private papa: Papa) {
 }

ngOnInit() {}

dom_to_img(event,chart_name) {
Utils.dom_to_img(event.target,chart_name);
}

}

utility.ts

public static dom_to_img(elm,file_name) {
let chart: any = elm.closest(".download-wrap").querySelector('.graph- 
 div');
domtoimage.toPng(chart,{ quality: 1,bgcolor: "#fff" })
  .then(function (dataUrl) {
    var link = document.createElement('a');
    link.download = file_name + ".png";
    link.href = dataUrl;
    link.click();
  });
}

我附上了两张图片。第一个显示了 div 是如何的。它有每月的下拉菜单。 第二张图显示了使用插件捕获的图像。它每天显示在下拉列表中，实际上是下拉列表中的第一个选项。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）