如何在JsPdf autotable中使用粗体和普通文本样式（如何使用jsautotable jspdf实现粗体和普通文本）。

Question

如何在JsPdf autotable中使用粗体和普通文本样式（如何使用jsautotable jspdf实现粗体和普通文本）。

javascriptarraysjspdf-autotabletext-styling

3

我使用 Array.prototype.push() 创建了一个包含动态表格值的数组。然后像这样将其转换为 pdf

doc.autoTable(vHeader, vData, opt);
doc.save('myTable');

其中，

vHeader = 标题数组
vData = 表格内容数据
opt = 样式

我的输出是这个PDF输出：

正如您在图中所见，例如，“260.00 /roll”，我想让“260.00”成为粗体文本，同时保持“/roll”为常规文本。你能帮我吗？非常感谢。

- lny

请问我的回答有帮到您吗？ - Pallamolla Sai

我已经将代码粘贴在这里，请通过此链接查看。https://codepen.io/pallamollasai/project/editor/AVPpOK 请下载PDF并检查一下。 - Pallamolla Sai

你好。我已经复制了你发来的整个代码和插件，但错误仍然出现了。 - lny

你有看过上面的CodePen链接吗？你下载到PDF了吗？ - Pallamolla Sai

如果您遇到任何错误，请展示完整代码和错误信息，我会尝试在我的笔记本电脑上重现。 - Pallamolla Sai

显示剩余9条评论

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Pallamolla Sai · Accepted Answer

在整天的工作后，以下代码成功将粗体和普通文本混合在一个单元格中。

要下载 autotable.js 源代码，请通过此链接进行操作。（复制名为 autoTableJSpdf.js 的文件中的所有代码）

要下载 html2canvas（1.0.0-alpha.11）源代码，请通过此链接进行操作，并下载“html2canvas.js”文件并将其粘贴到您的文件夹中并在脚本中包含它。（无需更改此文件。） html2canvas 1.0.0 alpha.11 下载autotablejs 3.2.2 我以自己的数据为参考。

** 整个HTML和JavaScript代码 **

<!DOCTYPE html>

<html lang="en">
<head>
  <meta charset="utf-8">
  <script type="text/javascript" src="html2canvas.js"></script> // download source code & paste inside file called "html2canvas.js"

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.debug.js" integrity="sha384-NaWTHo/8YCBYJ59830LTz/P4aQZK1sS0SneOgAvhsIl3zBu8r9RevNg5lHCHAuQ/" crossorigin="anonymous"></script>

  <script src="autoTableJSpdf.js"></script>

</head>
<body>
   <!-- this html is not necessary -->
  <h1>Hello world</h1>
  <div id='doc'>
    <p>Hello world</p>
    <div class="first-page">
        <h1>bond</h1>
        <img src="1.png"/>
    </div>
    <div class="second-page">
        <img src="2.png"/>
    </div>
  </div>
  <button onclick="saveDoc()">click</button>
  <script type="text/javascript">

    var doc = new jsPDF();
        // You can use html:
        // doc.autoTable({html: '#my-table'});

        // Or JavaScript:
        var header = ["qty","particular","luzon","trading","arrow"];
        //var data = [];
        //var i=0;
        doc.autoTable({
            willDrawCell: (data) => {


                if(data.section==='body') {
                    if(data.row.index===0 && data.column.index ===2) {

                        var endIndex = data.cell.raw.indexOf('/');
                        var boldText = data.cell.raw.substring(0,endIndex);
                        var normalText = data.cell.raw.substring(endIndex);
                        console.log("boldText is  "+boldText+"  normalText is  "+normalText);
                        // data.cell.raw = '<b>'+boldText+'</b>'+normalText;

                        data.cell.text = '<b>'+boldText+'</b>'+normalText;

                        console.log("after data cell iss  ");
                        console.log(data.cell.raw);

                        console.log('<b>'+boldText+'</b>'+normalText);

                    }
                }

            },

           // columnStyles: {0: {halign: 'center', fillColor: [0, 255, 0]}},
            head: [header],
            body: [
                ['5 tube','electrical','260.00 /roll','290.00 ,Armark1','230.00,crorocdile'],
                ['6 tube','electrical1','261.00 /roll','291.00 ,Armark11','231.00,crorocdile']

            ]
        });




        console.log("i is  "+i);
        doc.save('table.pdf');

     </script>
 </body>
 </html>

在编写上述代码后，您需要在下载的autoTableJSpdf.js文件中更改jsPDF.API.autoTableText方法，如下所示。只需添加如下内容。"Original Answer" 翻译成 "最初的回答"。

// dont change any code 
// method name jsPDF.API.autoTableText  
if (typeof x !== 'number' || typeof y !== 'number') { // this will already there
    console.error('The x and y parameters are required. Missing for text: ', text);
}
// new code to add
if (/<[a-z][\s\S]*>/i.test(text)) { // you need to add this whole if code 
    // text = text.join(' ');
    const div = document.createElement('div');
    div.innerHTML = text;
    text = div.innerHTML;
    this.fromHTML('<div style=" font-size: 15px; ">' + text + '</div>', x, y, { // y coord
        'width': 120
    });
    return this;
}
// remaining code

以下链接可能会有所帮助。如何混合使用粗体和普通HTML在GitHub上最初的回答。