html - 当我从 html 转换为 PDF 时，换行符没有出现在转换后的 PDF 页面中，正如我在 HTML 页面中看到的那样

Question

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

这是我将表单 html 转换为 pdf 的 Angular 代码

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: when you want print the html target you do not need the innerHtml, use outerHTML to get the html effects too like class, style or ...

doc.fromHTML(
  document.getElementById(scope.elemId).outerHTML, 15, 15, {
       'width': 170,
});

此示例缺少 jspdf 库 在本地运行它

结果会像这张图

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

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="app">
  <export-to-pdf elem-id="topdf"></export-to-pdf>

  <table class="table table-hover" id="topdf" 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 Test
        </h3>
      </td>
    </tr>

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