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

fnatzsnv  于 2022-11-21  发布在  Angular
关注(0)|答案(6)|浏览(195)

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

我尝试了风格与唐,但它是不工作的如何可以降低字体大小,以便我可以正确导出PDF文件?

rhfm7lfc

rhfm7lfc1#

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

apeeds0o2#

表上的pdf.fromHTML似乎忽略了样式,甚至忽略了jsPdf设置,如pdf.setFont("helvetica");等。
以便您可以对原始jspdf.debug.js文件进行更改:
a)默认autoSizefalse,因此您可以更改它。
B)默认fontSize为12 -您应该发送d个较小的值(将您的值添加到最后一个参数)。

/*** 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
    });
}
oxiaedzo

oxiaedzo3#

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

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

}
3lxsmp7m

3lxsmp7m4#

这对我很有效:

table.style.fontSize = '5px';
ctzwtxfj

ctzwtxfj5#

试用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>
kpbwa7wx

kpbwa7wx6#

简单直接:

var doc = new jspdf.jsPDF();
doc.autoTable({ html: '#tabelaDadosExtrato' });
doc.save('extrato-cliente-bet.pdf');

基于https://github.com/simonbengtsson/jsPDF-AutoTable中的示例

相关问题