web-dev-qa-db-ja.com

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ファイルをエクスポートしています

enter image description here

Tangでスタイルを試しましたが、うまくいきません。PDFファイルを適切にエクスポートできるように、フォントサイズを小さくするにはどうすればよいですか。

javascripthtmlangularjspdfjspdf
13
Sunil Garg
pdf.setFont("helvetica");
pdf.setFontType("bold");
pdf.setFontSize(9);
9
Hitesh Vala Ahir

テーブルのpdf.fromHTMLはスタイリングを無視しているようです、あるいはpdf.setFont("helvetica");などのjsPdf設定も無視しています。

したがって、元の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
    });
}
2
Noshe

私に役立つ例を挙げましょう。

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

}
2
Sergio Aguirre

これは私にとってはうまくいきます：

table.style.fontSize = '5px';
1
mixo

お試しください 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/[email protected]'></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>
0
Praveen Kumar