Экспорт загрузочной модальной в PDF проблемы - PullRequest
Новая
       16

Экспорт загрузочной модальной в PDF проблемы

0 голосов
/ 03 июля 2019

У меня есть угловой родительский компонент, который включает 4 дочерних компонента в следующем порядке.

SampleCharts Пример данных SampleEmail SampleDocuments У компонента sampleData есть модальный вариант загрузки, который я хочу экспортировать в PDF. Поэтому мне нужно преобразовать мой элемент HTML Div в canvas, а затем преобразовать в PDF.

Ниже приведен мой фрагмент кода, и он продолжает генерировать чистый PDF, который, я считаю, имеет отношение к размеру 4 компонентов.

Однако, если я создаю новый компонент PrintToPdf и использую только селектор образца компонента Data и использую тот же метод печати (), модал успешно экспортируется в PDF.

Я не уверен, имеет ли это отношение к библиотеке холста HTML2 с огромным родительским компонентом, но мне нужно реализовать эту функцию в родительском компоненте.

print (): void {

let x;
var leftMargin = 15;
//Get the DOM For my div element . ModalContent is my div
 x = this.modalContent.nativeElement;


// set up your pdf. This is in portrait mode, used millimeters for measurement, and the paper size is letter
let pdf = new jsPDF('p', 'mm', 'letter');
if (x!= null) {
  let options = {backgroundColor: 'blue' ,overflow : true}; 
    // pass your content into html2canvas, then set up the print job
    html2canvas(x,options).then(canvas => {

           var docWidth = pdf.internal.pageSize.getWidth();
           var docHeight = pdf.internal.pageSize.getHeight(); 

        if (x != null) {

             // I used bitmap here but the image type seems irrelevant, however the canvas.toDataUrl is required
            const xUrl = canvas.toDataURL('image/png');
             // use the image properties when scaling the image to fit the page
          const imageProperties = pdf.getImageProperties(xUrl);

             // get the width of the image to maintain the ratio. This content is “tall” so I scale the width to maintain the aspect. 
            // I also reduced the width and height by 20 mm to leave a margin
          docWidth = ((imageProperties.width * docHeight) / imageProperties.height) - 20;

             // add the image to the pdf
            pdf.addImage(xUrl, 'PNG', 10,10,docWidth,docHeight-20);
        //}

        // save the pdf with whatever name you choose
       pdf.save(this.tempSample.name + " " +  'Modal.pdf');
       this.closeEditModal();
        }
    });
}

}

...