Question

我到处搜索，但我找到了关于如何在html页面中提供换行符的答案。但我的问题不在于，我在HTML页面中获得了正确的换行符。但是当从HTML转换为PDF时，信息显示为PDF页面中的段落而不是列表。我需要将其显示为列表。

这是我将表单html转换为pdf

的角度代码

crmMain.directive('exportToPdf', function() {
    return {
        restrict: 'E',
        scope: {
            elemId: '@'
        },
        template: '<button data-ng-click="exportToPdf()" style="text-
        decoration: none;background - color: green;color: white;
        " 
        class = "btn" > Export to PDF < /button>',
        link: function(scope, elem, attr) {
             scope.exportToPdf = function() {
                var doc = new jsPDF();
                console.log('elemId 12312321', scope.elemId);
                doc.fromHTML(
                    document.getElementById(scope.elemId).innerHTML, 15, 15, {
                        'width': 170,
                    });
                doc.save(scope.elemId + '.pdf');
            }
        }
    }
});

我已使用以下代码在HTML页面中显示详细信息

<table class="table table-hover" id="{{client.company_name}}" style="width:100%;color: black;border:none;">
    <tr>
        <td style="font-size: 22px;border:none;font-weight: 
                         bold">
            <h3 style="font-weight: 700;padding: 
                          0px;margin:0px;">Details of '{{client.company_name}}'</h3>
        </td>
    </tr>

    <tr>
        <td><span style="font-weight: bold;margin-
                            bottom:20px;">Customer Name</span>
            <span> &nbsp;:&nbsp;&nbsp;</span>
            <span>{{client.customer_name}}</span></td>
    </tr>
    <tr>
        <td><span style="font-weight: bold;">Customer 
                          Email</span>
            <span> &nbsp;:&nbsp;&nbsp;</span>
            <span>{{client.customer_email}}</span></td>
    </tr>
    <tr>
        <td><span style="font-weight: bold;">Address</span>
            <span> &nbsp;:&nbsp;&nbsp;</span>
            <span>{{client.address_1}},{{client.address_2}},{{client.address_3}}</span></td>
    </tr>
    <tr>
        <td><span style="font-weight: bold;">City</span>
            <span> &nbsp;:&nbsp;&nbsp;</span>
            <span>{{client.city}}</span></td>
    </tr>
    <tr>
        <td><span style="font-weight: bold;">State</span>
            <span> &nbsp;:&nbsp;&nbsp;</span>
            <span>{{client.state}}</span></td>
    </tr>
    <tr>
        <td><span style="font-weight: bold;">Country</span>
            <span> &nbsp;:&nbsp;&nbsp;</span>
            <span>{{client.country}}</span></td>
    </tr>
</table>

Answer 1

outerHTML：如果要打印html目标而不需要innerHtml，请使用outerHTML来获取html效果class，{ {1}}或......

style

此示例错过doc.fromHTML( document.getElementById(scope.elemId).outerHTML, 15, 15, { 'width': 170, });库 在您的本地运行

结果就像这张图片

＆＃13;

jspdf

＆＃13;

var app = angular.module('app', []);

app.directive('exportToPdf', function() {
  return {
    restrict: 'E',
    scope: {
      elemId: '@'
    },
    template: '<button data-ng-click="exportToPdf()" style="text-decoration: none;background-color: green;color: white;" class="btn" > Export to PDF</button>',
    link: function(scope, elem, attr) {
      scope.exportToPdf = function() {

        var doc = new jsPDF();

        doc.fromHTML(
          document.getElementById(scope.elemId).outerHTML, 15, 15, {
            'width': 170,
          });

        doc.save(scope.elemId + '.pdf');
      }
    }
  }
});

＆＃13;

Answer 2

为什么不使用page-break-after CSS属性进行浏览。

有关更多信息，请参见here。

当我从html转换为PDF时，换行的PDF页面中不会出现换行符，就像我在HTML页面中看到的那样

2 个答案: