JsPdf autotable中单元格内的粗体和普通文本样式（如何使用jsautotable jspdf使用粗体和普通文本）

Question

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

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

其中，

vHeader = 标题数组
vData = 身体细胞内的数据
opt = 样式

我的输出是这个 PDF 输出：

正如您在图片中看到的，例如“260.00 /roll”，我想将“260.00”设为粗体，同时将“/roll”设为常规。你能帮我解决这个问题吗？非常感谢。

Answer 1

经过一整天的工作，以下代码在单元格内混合了粗体和普通文本。

要下载 autotable.js 源代码，请访问此链接。（将整个代码复制到名为 autoTableJSpdf.js 的文件中）

要下载 html2canvas(1.0.0-alpha.11) 源代码，请通过此链接下载“html2canvas.js”文件并将其粘贴到您的文件夹中并包含在脚本中。 （无需更改此文件。）

html2canvas 1.0.0 alpha.11

download autotablejs 3.2.2

我将自己的数据作为参考。

** 整个 html 和 javscript 代码 **

<!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 方法内部进行更改，如下所示。只需添加如下。

// 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 

以下链接可能会有所帮助。

how to mix both bold & normal html github