如何在jspdf中对齐图像

Question

我需要对齐jspdf中的文本和图像。我可以很好地渲染所有内容，但这与它在 html 中的样式不同。 请看图片：

但这就是它在 PDF 上的样子

我想我必须先将 hml 转换为图像，然后将图像添加到 PDF，所以我安装了 html2canvas。但我不知道如何同时使用这两者。请看我的代码；

 <div class="container" id="pdfView" #pdfView>
        <div class="card card-profile shadow mt--300">
          <div class="px-4">
            <div class="row justify-content-center">
              <div class="col-lg-3 order-lg-2">
                <div class="card-profile-image">
                  <a href="javascript:void(0)">
                    <img
                      src="./assets/img/brand/autosweeprfid.png"
                      class="rounded-circle"
                      style="display: none"
                    />
                  </a>
                </div>
              </div>
              <div class="col-lg-4 order-lg-3 text-lg-right align-self-lg-center">
                <div class="card-profile-actions py-4 mt-lg-0">
                  <!-- <a href="javascript:void(0)" class="btn btn-sm btn-info mr-4">Connect</a>
                    <a href="javascript:void(0)" class="btn btn-sm btn-default float-right">Message</a> -->
                </div>
              </div>
              <div class="col-lg-4 order-lg-1">
                <div class="card-profile-stats d-flex justify-content-center">
                  <div>
                    <span class="heading">&nbsp;</span>
                    <span class="description">&nbsp;</span>
                  </div>
                </div>
              </div>
            </div>
            <div class="text-center">
              <h3>Some Application</h3>
            </div>
            <div class="border-top text-left">
              <div class="row justify-content-center">
                <div class="col-lg-9">
                  <section class="section pb-0 section-components">
                    <div class="container">
                      <div class="row">
                        <div class="col-md-8">
                          <p>Hi There!</p>  
                          <p>
                            <!-- Thank you for using Autosweep RFID Online Appointment. -->
                            Thank you for using Application.
                          </p>
                          <p>Let us review the information that you gave us.</p>
                        </div>
                        <div class="col-md-4">
                            <ngx-qrcode 
                                [elementType]="elementType" 
                                [value] = "value"
                                cssClass = "aclass"
                                errorCorrectionLevel = "L">
                            </ngx-qrcode>
                        </div>
                      </div>
                      <div class="row">
                        <div class="col-md-12">
                          <table class="table table-sm table-bordered">
                            <thead>
                              <tr>
                                <th>Properties</th>
                                <td>Value</td>
                              </tr>
                              <tr>
                                <th>Email Address</th>
                                <td>myMail@gmail.com</td>
                              </tr>
                              <tr>
                                <th>Customer Name</th>
                                <td>Some Name</td>
                              </tr>
                              <tr>
                                <th>Plate Number</th>
                                <td>AAA111</td>
                              </tr>
                              <tr>
                                <th>Date</th>
                                <td>2020-11-28</td>
                              </tr>
                              <tr>
                                <th>Time</th>
                                <td>18:00</td>
                              </tr>
                              <tr>
                                <th>Station</th>
                                <td>Some Station</td>
                              </tr>
                              <tr>
                                <th>Rerence Number</th>
                                <td>123456789</td>
                              </tr>
                            </thead>
                          </table>
                        </div>
                      </div>
                    </div>
                  </section>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

ts

declare var jsPDF: any;
@ViewChild('pdfView', {static: false}) pdfView: ElementRef;

 downloadAsPDF() {

    const doc = new jsPDF('p', 'pt', 'letter');
    const content = this.pdfView.nativeElement;
    const margins = {
      top: 30,
      left: 40,
      width: 300,
      height: 800
    };

    doc.fromHTML(content.innerHTML, margins.left, margins.top, {}, function () {
        doc.save('export.pdf');
      }, margins);
  }

你能告诉我怎么做吗？谢谢。

Answer 1

const logo_path = "../../../../assets/img/logo.png"; //logo path
const pdf = new jsPDF('p', 'px', 'a4', true); // jspdf instance
const pageHeight = pdf.internal.pageSize.height; // pdf page height
const pageWidth = pdf.internal.pageSize.width; // pdf page width
const positionX = 10, positionY = 20; // starting position x, position y
pdf.setDrawColor(229, 229, 229);
pdf.setTextColor(75, 75, 75);
//////////////////////////////////// header ////////////////////////////////////
const str = "Header";
pdf.setFontSize(14);
const xOffset = (pageWidth - pdf.getStringUnitWidth(str) * pdf.getFontSize() + 10) / 2; // align center
pdf.text(this.reportName, xOffset, 30);

////////////////////////////////// header end //////////////////////////////////
pdf.setDrawColor(229, 229, 229);
pdf.line(10, 75, pageWidth-10, 75); // split line
//////////////////////////////////// table1 ////////////////////////////////////
autoTable(pdf, {      
    html: '#my_table1',
    startY: 90,
    headStyles: {
        fillColor: [255, 255, 255],
        textColor: [75, 75, 75]
    },
    showFoot: "everyPage"
});
////////////////////////////////// table1 end //////////////////////////////////
let finalY = (pdf as any).lastAutoTable.finalY;
pdf.line(10, finalY+10, pageWidth-10, finalY+10);
// split line
//////////////////////////////////// chart ////////////////////////////////////
const mychartDOM = <HTMLElement>document.getElementById('id_chart');
// get chart html dom element
const mychartCanvas = await html2canvas(mychartDOM);
// convert chart to canvas image
const mychartImage = mychartCanvas.toDataURL('img/png'); // chart image to image url
const imgWidth = (pageWidth-30) / 100 * 60; // image width 60% of page width, another 40% is table
const imgHeight = mychartCanvas.height * imgWidth / mychartCanvas.width; // image height
// adding page if a content overflows
if( pageHeight - finalY <= imgHeight + 30 )
{
    pdf.addPage();
    finalY = 10;
}
pdf.addImage(mychartImage, 'PNG', positionX, finalY + 30, imgWidth, imgHeight);
//////////////////////////////////// chart end ////////////////////////////////////
// adding side table to pdf
autoTable(pdf, {
    html: '#my_table2',
    headStyles: {
        fillColor: [255, 255, 255],
        textColor: [75, 75, 75]
    },
    margin: 
    {
        top: 30,
        left: imgWidth+15
    }
});

// save pdf
pdf.save('xxx.pdf');

@ibanez1408 这是一个例子。