Как преобразовать HTML-элемент в изображение и экспортировать изображение в файл Excel - PullRequest
0 голосов
/ 08 июля 2019

В настоящее время я конвертирую 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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...