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

新手上路,请多包涵

我正在使用 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 文件?

原文由 Sunil Garg 发布,翻译遵循 CC BY-SA 4.0 许可协议

阅读 1.1k
2 个回答
pdf.setFont("helvetica");
pdf.setFontType("bold");
pdf.setFontSize(9);

原文由 Hitesh Vala Ahir 发布,翻译遵循 CC BY-SA 3.0 许可协议

我给你一个对我有用的例子:

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

}

原文由 Sergio Aguirre 发布,翻译遵循 CC BY-SA 4.0 许可协议

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题