Question

我有一个角形父级组件，该组件按以下顺序包括4个子组件。

样本图样本数据样本邮件样本文件 sampleData组件确实具有我想导出为PDF的引导程序模式。因此，我需要将HTML Div元素转换为canvas，然后转换为PDF。

以下是我的代码段，它不断生成空白PDF，我认为这与4个组件的大小有关。

但是，如果我创建一个新的PrintToPdf组件并仅使用示例数据组件的选择器并使用相同的打印方法（），则模式将成功导出到PDF。

我不确定父组件是否很大，这是否与HTML2 Canvas库有关，但是我需要在父组件中实现此功能。

print（）：无效{

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();
        }
    });
}

}

将Bootstrap模态导出到PDF问题

0 个答案: