如何在 jspdf.js 中设置导出表格的字体大小？

Question

我正在使用 jspdf.debug.js 从 html 页面导出 pdf 数据。这是我正在使用的控制器的功能。我创建了一个字符串作为要导出的 html 表。

$scope.exportReport = function (fileName, fileType) {
   objReport.count = 0;   // for getting all records
   ReportService.getSaleDetail(objReport).then(function (result) {
        var strTable = "<table id='tableReport'><tr><td style='width:400px'>Date</td><td style='width:50px'>Order Id</td><td style='width:130px'>Product</td><td style='width:120px'>Gorss Price</td><td style='width:160px'>Currency</td><td style='width:50px'>Order Status</td><td style='width:150px'>Assigned To</td><td style='width:150px'>Assigned User Email</td><td style='width:150px'>Country</td></tr>";
        var strRow = '';
        if (result.data.totalRecords > 0) {
             var totalRecords = parseInt(result.data.totalRecords);
             var saleDataJson = result.data.saleDetail;
             for (var i = 0; i < totalRecords; i++) {
                 strRow = '<tr><td>' + saleDataJson[i].date + '</td>' + '<td>' + saleDataJson[i].orderId + '</td>' + '<td>' + saleDataJson[i].product + '</td>' + '<td>' + (1 * saleDataJson[i].grossPrice).toFixed(2) + '</td>' + '<td>' + saleDataJson[i].currency + '</td>' + '<td>' + saleDataJson[i].orderStatus + '</td>' + '<td>' + saleDataJson[i].assignedTo + '</td><td>' + saleDataJson[i].assignedUserEmail + '</td><td>' + saleDataJson[i].country + '</td></tr>';
                 strTable += strRow;
             }
             strTable += "</table>";
        }
        if (fileType === 'pdf') {
                var pdf = new jsPDF('p', 'pt', 'letter')    // jsPDF(orientation, unit, format)
                        , source = strTable
                        , specialElementHandlers = {
                            // element with id of "bypass" - jQuery style selector
                            '#bypassme': function (element, renderer) {
                                // true = "handled elsewhere, bypass text extraction"
                                return true;
                            }
                        },
                margins = {
                    top: 30,
                    bottom: 40,
                    left: 35,
                    width: 600
                };

                pdf.setFontSize(12);
                pdf.text(200, 30, fileName);
                pdf.setFontSize(8);
                pdf.setFontStyle('italic');
                pdf.text(420, 35, 'Total Records : ' + totalRecords);
                pdf.fromHTML(
                        source // HTML string or DOM elem ref.
                        , margins.left // x coord
                        , margins.top // y coord
                        , {
                            'width': margins.width // max width of content on PDF
                            , 'elementHandlers': specialElementHandlers
                        },
                function (dispose) {
                    // dispose: object with X, Y of the last line add to the PDF
                    //          this allow the insertion of new lines after html
                    pdf.save(fileName + '.pdf');
                },
                        margins
                        )
            }

        });

    };

这个方法是像这样导出pdf文件

我尝试了 tang 的风格，但它不起作用 如何降低字体大小以便我可以正确导出 pdf 文件？

Answer 1

我给你一个适合我的例子：

function imprimirPdf() {
    var pdf = new jsPDF('p', 'pt', 'letter');
    pdf.setFont("arial", "bold");
    pdf.setFontSize(14);
    pdf.text(20, 20, 'Consulta');
    $("#idTablaDatos").css("font-size", "10px");// change property value
    $("#idTablaDetalle").css("font-size", "10px");// change property value
    source = $('#div_pdf').html();//div_pdf contains idTablaDatos and idTablaDetalle
    $("#idTablaDatos").css("font-size","14px");// original value
    $("#idTablaDetalle").css("font-size","14px");// original value

    specialElementHandlers = {
        '#bypassme': function (element, renderer) {
            return true
        }
    };
    margins = {
        top: 80,
        bottom: 60,
        left: 40,
        width: 522
    };
    // all coords and widths are in jsPDF instance's declared units
    // 'inches' in this case


    pdf.fromHTML(
            source, // HTML string or DOM elem ref.
            margins.left, // x coord
            margins.top, {// y coord
                'width': margins.width, // max width of content on PDF
                'elementHandlers': specialElementHandlers
            },
    function (dispose) {
        // dispose: object with X, Y of the last line add to the PDF 
        //          this allow the insertion of new lines after html
        pdf.save('Test.pdf');
    }, margins);

}

Answer 2

似乎 pdf.fromHTML 在表格上忽略了样式，甚至忽略了 jsPdf 设置，例如 pdf.setFont("helvetica"); 等。

这样您就可以对原始 jspdf.debug.js 文件进行更改：

a) 默认autoSize 为false，因此您可以更改它。

b) 默认 fontSize 为 12 - 您应该发送较小的值（将您的值添加到最后一个参数）。

/*** TABLE RENDERING ***/
} else if (cn.nodeName === "TABLE") {
    table2json = tableToJson(cn, renderer);
    renderer.y += 10;
    renderer.pdf.table(renderer.x, renderer.y, table2json.rows, table2json.headers, {
            autoSize : true,
            printHeaders : true,
            margins : renderer.pdf.margins_doc,
            fontSize : 9
    });
}

Answer 3

试试AutoTable - jsPDF的表格插件

<a class="pull-right btn btn-warning btn-large" href="#" onclick="generate();"><i class="fa fa-file-excel-o"></i> PDF Data</a>
<table class="table table-bordered table-striped" id="basic-table">

<script src='https://cdn.rawgit.com/simonbengtsson/jsPDF/requirejs-fix-dist/dist/jspdf.debug.js'></script>
<script src='https://unpkg.com/jspdf-autotable@2.3.2'></script>
<script src="<?php echo base_url();?>assets/bower_components/jspdf/dist/index.js"></script>
<script>


function generate() {

  var doc = new jsPDF('l', 'pt', 'a4');
  doc.setFontSize(12);

  var res = doc.autoTableHtmlToJson(document.getElementById("basic-table"));
  doc.autoTable(res.columns, res.data, {margin: {top: 80}});

  var header = function(data) {
    doc.setFontSize(18);
    doc.setTextColor(40);
    doc.setFontStyle('normal');
    //doc.addImage(headerImgData, 'JPEG', data.settings.margin.left, 20, 50, 50);
    doc.text("Country List", data.settings.margin.left, 50);
  };

  var options = {
    beforePageContent: header,
    margin: {
      top: 80
    },

    startY: doc.autoTableEndPosY() + 20
  };

  doc.autoTable(res.columns, res.data, options);

  doc.save("Test.pdf");
}



</script>

Answer 4

这对我有用：

table.style.fontSize = '5px';

Answer 5

pdf.setFont("helvetica");
pdf.setFontType("bold");
pdf.setFontSize(9);