Question

我需要以横向格式制作PDF。

<script type="text/javascript">
    $(function () {
        var doc = new jsPDF();
        var specialElementHandlers = {
            '#editor': function (element, renderer) {
                return true;
            }
        };
        $('#cmd').click(function () {
            doc.fromHTML($('#content').html(), 15, 15, {
                'width': 170,
                'elementHandlers': specialElementHandlers
            });
            doc.save('sample-file.pdf');
        });
    });
</script>

Answer 1

我发现了。这很简单:)第一个Param用于jsPDF()中的风景，l用于风景。

var pdf = new jsPDF('l', 'mm', [297, 210]); //The first Param is for landscape or portrait

Answer 2

将以下代码用于纵向模式。

    var doc = new jsPDF('l', 'mm', 'a4'); // optional parameters
    doc.addImage(img/imgdata, 'PNG', 10, 10, 280, 180);
    doc.save("new.pdf");

在为pdf添加图像或数据时配置尺寸。

Answer 3

app.component.ts

@ViewChild('pdfContent') pdfContent: ElementRef;

 async capture() {

// var doc = new jspdf("p", "pt", "a4");  // For Portrait

var doc = new jspdf('l', 'pt', "a4");  // For landscape
var width = doc.internal.pageSize.width;
var height = doc.internal.pageSize.height;
console.log("height is", height);
console.log("width is", width);

let specialElementHandlers = {
  '#pdfContent': function (element, renderer) {
    return true;
  }
}



let content = this.pdfContent.nativeElement;
var margin = {
  top: 0,
  left: 0,
  right: 20,
  bottom: 20,
  width: 170
};

console.log(content);
await new Promise(next => {

  var pageHeight = doc.internal.pageSize.height;

  // Before adding new content
  var y = 500 // Height position of new content
  if (y >= pageHeight) {
    doc.addPage();
    y = 0 // Restart height position
  }
  doc.internal.scaleFactor = 1.40;
  doc.addHTML(document.getElementById('entireTable'), 10, 10,
    { pagesplit: true, format: "PNG", backgroundColor: 'white', background: 'white', margin: { top: 10, right: 10, bottom: 10, left: 10 } }
    , async function (data) {
      doc.save('file.pdf');
      next()
    });



})

app.component.html

 <div class="col-md-12" class="tablejoin" #pdfContent id = 
 "entireTable" >
<table> .. </table>
</div>

以横向格式从HTML页面制作PDF

3 个答案: