Question

我目前正在使用dom-to-image插件将html元素（例如“ div”）转换为图像。然后，我将图像手动插入到Excel文件中。有什么方法可以将标签转换为图像并将图像导出为excel文件，而无需手动创建文件和手动插入图像？

因此，本质上，流程应为Tag-> image->插入excel->导出为excel

但目前是：

标记->图像->导出为图像->手动创建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文件中

如何将HTML元素转换为图像并将图像导出到Excel文件

0 个答案: