В настоящее время я конвертирую html-элемент, такой как "div", в изображение с помощью плагина dom-to-image.Затем я вручную вставляю изображение в файл Excel.Есть ли способ, с помощью которого я могу преобразовать тег в изображение и экспортировать изображение в файл Excel, не создавая файл вручную и не вставляя изображение вручную?
Так что, по сути, поток должен быть Tag-> image-> insert to excel-> export as excel
, но в настоящее время это:
tag-> image-> exportкак изображение-> создать файл Excel вручную-> вставить изображение вручную
//my convert-to-imageService service using dom-to-image plugin
import { Injectable } from '@angular/core';
import domtoimage from 'dom-to-image';
@Injectable({
providedIn: 'root'
})
export class ConvertToImageService {
constructor() { }
tableToImage(a:string){
domtoimage.toJpeg(document.getElementById(a), { quality: 0.95 })
.then(function (dataUrl) {
var link = document.createElement('a');
link.download = a+'.jpeg';
link.href = dataUrl;
link.click();
});
}}
//component call to the image conversion service
constructor(private convertToImageService:ConvertToImageService) { }
exportTableToImage(){
//'convertMeToImage is the id of the tag that needs to be converted to image
this.convertToImageService.tableToImage('convertMeToImage')
}
<!--html template for the component above -->
<div id="convertMeToImage" class="box box:solid">
<div class ="box-header with-border">
<h4><strong>{{student.studentName}}</strong></h4>
</div>
<div class = "box-body">
<table id="studentDetails" class="table table-bordered table-striped">
<tbody>
<tr>
<th>studentID</th>
<th >taskID</th>
<th>homework Name</th>
<th>Description of homework</th>
<th>Completed</th>
<th>Pending</th>
</tr>
<tr *ngFor = "let a of student.homeworkData" >
<td>{{student.id}}</td>
<td>{{a.homeworkId}}</td>
<td>{{a.homeworkName}}</td>
<td>{{a.homeworkDescription}}</td>
<td><span class="badge bg-green"><strong>{{a.homeworkCompleted}}%</strong></span></td>
<td><span class="badge bg-red"><strong>{{a.homeworkPending}}%</strong></span></td>
</tr>
</tbody>
</table>
</div>
</div>
<button (click)="exportTableToImage('convertMeToImage')" class="btn btn-success btn-flat">Export as Image</button>
В настоящее время изображение экспортируется правильно.Но я хочу экспортировать его в файл Excel / CSV