如何使用Angular在jspdf中使用应用的css样式呈现html（但没有画布！）

Question

我想使用JSPDF将HTML内容下载为PDF。它不对PDF中的html元素应用CSS样式。例如，如果我在html中使用dt和dl元素并将其显示在同一行中（在CSS中设置），则UI会完美显示，而pdf则不会。

我尝试使用html2canvas导出为PDF，但是主要缺点是用户无法选择PDF中的html内容，因为它以图像形式呈现。考虑下面使用JsPDF展示的一个示例。

HTML：

 <div class="container">  
    <form>
      <dl>
        <dt>Beast of Bodmin</dt>
        <dd>A large feline inhabiting Bodmin Moor.</dd>
      </dl>       
    </form>
  </div>

TS：

const margins = {
        top: 10,
        bottom: 40,
        left: 30,
        width: 550
      };
      const pdfgenerator = new jsPDF('p', 'pt', 'a4');     
      pdfgenerator.set
      pdfgenerator.fromHTML(
        document.getElementById('container'),
        margins.left,
        margins.top,
        {
          width: margins.width
        },
        function(dispose) {
        },
        margins);      
       pdfgenerator.save('text.pdf');

CSS：

dl {
    width: 100%;
    overflow: hidden;
    padding: 0;
    margin: 0;
  }

  dt {
    display: inline;
    float: left;
    width: 50%;
    padding: 0;
    margin: 0;
  }

  dd {
    display: inline;
    float: left;
    width: 50%;
    padding: 0;
    margin: 0;
  }

在用户界面中，所需的输出显示如下，标题和数据显示在同一行。

在PDF中，输出显示如下。标题和数据显示为两行。

区别在于CSS样式未在PDF中应用。有人可以告诉我如何使用css样式，以便在上述情况下PDF将呈现与UI中相同的样式吗？