Angular 6 html2canvas загружает изображение без расширения и PDF-файл только с указанным размером бумаги - PullRequest
Новая
       9

Angular 6 html2canvas загружает изображение без расширения и PDF-файл только с указанным размером бумаги

0 голосов
/ 16 октября 2018

Я использую js2pdf и html2canvas с угловым значением 6 для преобразования мат-карты, чтобы я мог преобразовать ее в PDF и распечатать позже.Я начал использовать эту ссылку :

Я начал с первой кнопки, которая конвертирует div в изображение: 

public toCanvas() {
    var elem = document.getElementById('contentToConvert');


    html2canvas(elem).then(function(canvas) {
      var generatedImage = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
      window.location.href=generatedImage;
    });
  }

Работает, но загруженный файл не 't с расширением .png или jpeg, и мне нужно щелкнуть правой кнопкой мыши и указать, с какой программой мне его открывать.

Второй вариант - преобразовать его в PDF с помощью следующей функции: 

public save2PDF(){
    var data = document.getElementById('contentToConvert');
    html2canvas(data).then(canvas => {
      // Few necessary setting options
      var imgWidth = 208; 
      var pageHeight = 295;  
      var imgHeight = canvas.height * imgWidth / canvas.width;
      var heightLeft = imgHeight;

      const contentDataURL = canvas.toDataURL('image/png')
      let pdf = new jspdf('p', 'mm', 'a4'); // A4 size page of PDF
      var position = 0;
      pdf.addImage(contentDataURL, 'PNG', 0, position, imgWidth, imgHeight)
      pdf.save('MYPdf.pdf'); // Generated PDF 
    });
  }

Для загруженного PDF задано значение A4, и его можно изменить на другие форматы бумаги, но мне нужно установить размер бумаги на mat-card, который есть в моем компоненте.

Вот мой html-скрипт: 

<mat-card class="example-card" id="contentToConvert" #matCard>
  <img class="alignImg" src="../../../../assets/logo.png" width="100px" height="40px">

  <mat-card-header>

    <div mat-card-avatar>
      <mat-icon>account_circle</mat-icon>
    </div>
    <!-- <div mat-card-avatar class="example-header-image"></div> -->

    <mat-card-title><b>Name:</b> {{arrayOfData.ind_first_name_en}} {{arrayOfData.ind_last_name_en}}</mat-card-title>
    <mat-card-subtitle><b>Gender:</b> {{arrayOfData.ind_gender}}</mat-card-subtitle>
    <mat-card-subtitle><b>Date of Birth:</b> {{arrayOfData.dob}} </mat-card-subtitle>
  </mat-card-header>
  <qrcode class="alignImg" [qrdata]="indId" [size]="50" [level]="'H'" [colordark]="color"   ></qrcode>
  <mat-card-content class="borderLine">
    <p>
      If found, please call our hotline ********.
      <br>
    </p>

  </mat-card-content>


</mat-card>
<button mat-button (click)="toCanvas()"><mat-icon>cloud_download</mat-icon> Download Image</button>
    <button mat-button (click)="save2PDF()"><mat-icon>print</mat-icon> Download PDF</button>

А вот мой машинописный код: 

import { Component, OnInit, Inject, ViewChild, ElementRef } from '@angular/core';
import { MatDialogRef, MAT_DIALOG_DATA, MatCard } from '@angular/material';
import { AuthApiService } from 'src/app/auth-api.service';
import * as jspdf from 'jspdf';

import html2canvas from 'html2canvas';

@Component({
  selector: 'app-individual-idcard',
  templateUrl: './individual-idcard.component.html',
  styleUrls: ['./individual-idcard.component.css']
})
export class IndividualIdcardComponent implements OnInit {
  indId: number;
  canvas: HTMLElement;
  arrayOfData: any = [];
  color = "#ff0000";
  @ViewChild('matCard') matCard: MatCard;
  constructor(private auth: AuthApiService, private dialogRef: MatDialogRef<IndividualIdcardComponent>,
    @Inject(MAT_DIALOG_DATA) public data: any) { }

  ngOnInit() {
    this.indId = this.data['individual_id'];
    this.getIndividualData();
  }

  getIndividualData() {
    this.auth.getIndividualDataById(this.indId).subscribe(
      (data) => {
        this.arrayOfData = data;
      },
      (error) => {
        console.log(error);
      }
    )
  }

  public toCanvas() {
    var elem = document.getElementById('contentToConvert');


    html2canvas(elem).then(function(canvas) {
      var generatedImage = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
      window.location.href=generatedImage;
    });
  }

  public save2PDF(){
    var data = document.getElementById('contentToConvert');
    html2canvas(data).then(canvas => {
      // Few necessary setting options
      var imgWidth = 208; 
      var pageHeight = 295;  
      var imgHeight = canvas.height * imgWidth / canvas.width;
      var heightLeft = imgHeight;

      const contentDataURL = canvas.toDataURL('image/png')
      let pdf = new jspdf('p', 'mm', 'a4'); // A4 size page of PDF
      var position = 0;
      pdf.addImage(contentDataURL, 'PNG', 0, position, imgWidth, imgHeight)
      pdf.save('MYPdf.pdf'); // Generated PDF 
    });
  }
}

Так что мне нужно скачать pdf-файл, который соответствует мат-карточке, и изображениес расширением

...