如何在 jspdf 上应用样式/布局答案

【问题标题】：how to apply style/layout on jspdf如何在 jspdf 上应用样式/布局
【发布时间】：2014-02-19 16:23:30
【问题描述】：

早安，

我是第一次使用 jsPDF，我发现它是一个很好的 pdf 生成器，因为它速度快且不消耗服务器的 CPU，但是我很难在其上添加一些样式，即使是简单的文本标记也不起作用？任何人都可以帮我解决这个问题，或者给我一些操作它的技巧吗？任何评论/答案/建议将不胜感激。

这是我的代码。

<!DOCTYPE html>
<html lang="en-US">
<head>
    <meta charset="utf-8">
    <title></title>

{{ HTML::script("js/jspdf/js/jquery/jquery-1.7.1.min.js")}}
{{ HTML::script("js/jspdf/js/jquery/jquery-ui-1.8.17.custom.min.js")}}
{{ HTML::script("js/jspdf/js/libs/polyfill.js")}}
{{ HTML::script("js/jspdf/jspdf.js")}}
{{ HTML::script("js/jspdf/js/libs/deflate.js")}}
{{ HTML::script("js/jspdf/js/libs/adler32cs.js/adler32cs.js")}}
{{ HTML::script("js/jspdf/js/libs/FileSaver.js/FileSaver.js")}}
{{ HTML::script("js/jspdf/js/libs/Blob.js/Blob.js")}}
{{ HTML::script("js/jspdf/jspdf.plugin.standard_fonts_metrics.js")}}
{{ HTML::script("js/jspdf/jspdf.plugin.split_text_to_size.js")}}
{{ HTML::script("js/jspdf/jspdf.plugin.addimage.js")}}
{{ HTML::script("js/jspdf/jspdf.plugin.cell.js")}}
{{ HTML::script("js/jspdf/jspdf.plugin.from_html.js")}}
{{ HTML::script("js/jspdf/js/basic-test.js")}}

</head>
<body>



<div style="border-width: 2px; border-style: dotted; padding: 1em; font-size:120%;line-height: 1.5em;" id="fromHTMLtestdiv">

<div>
 <h1>INVOICE No. 1</h1>
 <p style="float:left">Doe, John A</p> 
 <p style="float:right">Oklahoma city</p> 
</div>

 <table>
 <colgroup>
 <col width="10%">
 <col width="30%">
 <col width="40%">
 <col width="10%">
 <col width="10%">
 </colgroup>
 <thead>
 <tr>
  <th>id</th>
  <th>item name</th>
  <th>description</th>
  <th>price</th>
  <th>qty</th>
  <th>subtotal</th>
</tr>
</thead>
<tbody>


@foreach ($items as $item => $value)
<tr>

<td>{{$value->itemId}}</td>
<td>{{$value->itemName}}</td>
<td>{{$value->description}}</td>
<td>{{$value->itemPrice}}</td>
<td>{{$value->quantity}}</td>
<td>{{$value->quantity*$value->itemPrice}}</td>

 </tr>
 @endforeach


</tbody>

</table>


</div>
<div>

  <button onclick="javascript:demoFromHTML()" class="button">Run Code</button></p></div>     </div>

</div>
</div>

    <h1></h1>
<script>
$(document).ready(function() {
//demoFromHTML();
});
</script>

</body>
<footer>
</footer>
</html>

这是我的 js：

function demoFromHTML() {
var pdf = new jsPDF('p', 'pt', 'letter')

// source can be HTML-formatted string, or a reference
// to an actual DOM element from which the text will be scraped.
, source = $('#fromHTMLtestdiv')[0]

// we support special element handlers. Register them with jQuery-style 
// ID selector for either ID or node name. ("#iAmID", "div", "span" etc.)
// There is no support for any other type of selectors 
// (class, of compound) at this time.
, specialElementHandlers = {
    // element with id of "bypass" - jQuery style selector
    '#bypassme': function(element, renderer){
        // true = "handled elsewhere, bypass text extraction"
        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
)
}

它会渲染这个pdf：

我希望地址在同一行但在表单的右侧，并正确剖析我的表格以使每列都有适当的宽度。有什么想法请教

【问题讨论】：

标签： javascript jquery html css jspdf

【解决方案1】：

也许float 属性不足以将<p> 元素并排对齐，最好在段落上设置一个小于容器（父）元素的宽度。

<div>
     <h1>INVOICE No. 1</h1>
      <p style="float:left; width:150px;">Doe, John A</p> 
      <p style="float:right; width:150px;">Oklahoma city</p> 
</div>

希望对你有帮助：D

参考：http://webdesign.about.com/od/layout/a/aa060101a.htm

【讨论】：

不，那没用！我在与 jspdf 相同的问题上苦苦挣扎。