jspdf AutoTable :表格特定行的目标样式

2023-12-24

我正在为我的表格 pdf 使用 jsPDF AutoTable 插件。

我的资料来源:

#javaScriptIncludeTag("jspdf.min.js")#
#javaScriptIncludeTag("jspdf.plugin.autotable.js")#

我的资料来源来自:

https://github.com/MrRio/jsPDF https://github.com/MrRio/jsPDF

https://github.com/simonbengtsson/jsPDF-AutoTable https://github.com/simonbengtsson/jsPDF-AutoTable

我的脚本:

$(function() {

    var doc = new jsPDF('p', 'pt', 'a4');
    var $tables2 = $(".pdftable2");
    var startingY = 0;

    $tables2.each(function( index ) {

        var $this = $(this), tableid = $this.attr('id');
        var res = doc.autoTableHtmlToJson(document.getElementById(tableid));
        var offset =  2;
        startingY = doc.autoTableEndPosY() + offset;

        doc.autoTable(res.columns, res.data, {
            startY: startingY,
            pageBreak: 'avoid',
            theme: 'grid',
            styles: {
                overflow: 'linebreak',
                fontSize: 12,
                valign: 'middle'
            },
            columnStyles: {
                0: {valign: "top"}, 
                1: {
                    columnWidth: 20,
                    fontStyle: 'bold',
                    halign: 'center', 
                },
                2: {
                    columnWidth: 20,
                    fontStyle: 'bold',
                    halign: 'center', 
                },
                3: {
                    columnWidth: 20,
                    fontStyle: 'bold',
                    halign: 'center', 
                },
            }
        });

    }); 

    doc.save('pdf doc');

});

我的标记:

<table class="pdftable2" id="j_info" border="1">
        <tr>
            <th>Group Name</th> 
            <th>Yes</th>    
            <th>NA</th>
            <th>No</th>
        </tr>
        <tr>
            <td colspan="4">Sub Group name</td> 
        </tr>
        <tr>
            <td>
                Phasellus sagittis tristique augue
            </td>
            <td></td>
            <td>X</td>
            <td></td>
        </tr>
    </table>

我的标题是组名称,后面的第二行是子组名称。我想用子组来定位第二行并给出独特的风格。我如何定位整行。下面是我的桌子的样子。

重要的提示:任何 CSS 样式都不会影响 pdf 的外观。我感兴趣的是 pdf 的外观,而不是实际页面在浏览器中的外观。重要的是,整个表格可以隐藏,但 jspdf AutoTable 仍会将其呈现为 pdf。


尝试下面的代码为特定行的单元格提供样式。

doc.autoTable({
  html: '#table',
  didParseCell(data) {
    if (data.cell.row.index === 0) {
      data.cell.styles.textColor = [255, 255, 255];
      data.cell.styles.fillColor = '#FF5783';
    }
  }
})
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

jspdf AutoTable :表格特定行的目标样式 的相关文章

随机推荐

  • CodeIgniter - CI_DB_mysqli_result 类的对象无法转换为字符串

    我目前正在使用 codeIgniter 我正在尝试根据电子邮件地址更新数据库中的密码 否则我会遇到问题 我使用在 CodeIgniter 网站上找到的以下代码来更新我的数据库 this gt db gt set field field 1
  • 哪里可以找到旧版本的 android ndk [关闭]

    Closed 这个问题不符合堆栈溢出指南 help closed questions 目前不接受答案 好吧 你们很多人都会说这是重复的this https stackoverflow com questions 6849981 where
  • 那么如何将数据推送到承诺内的数组呢?

    我一直在试图弄清楚 如何将结果从 Promise 循环推送到数组 谁能指出我正确的位置 const ids 1 2 3 let results for let id of ids getLight id then light gt resu
  • 将夜间叠加层添加到谷歌地图 API

    我的 Angular 项目中有以下 html 部分
  • 如何更改 TemplateField 中 ItemTemplate 的命令文本和图像按钮

    我有一个带有 ImageButton 的列 我的数据库字段有bit数据类型 我希望我的记录在该列中具有真正的价值True jpg我的命令变成MakeFalse当它有错误值时显示False jpg我的命令变成MakeTrue 我怎样才能做到这
  • 如何在AS3中发送GET请求?

    我在这里看到这个例子 http damn ihateblue net 2011 09 24 actionscript 3 send getpost http damn ihateblue net 2011 09 24 actionscrip
  • 防止 Javascript 转义文本?

    声明 text section main 结果是 节 主 有没有办法阻止 Javascript 解释器将反斜杠视为转义字符并将其删除 我希望能够声明 section main 并在输出中保留反斜杠 节 main 注意 我意识到如果我使用两个
  • JNI 中 jclass 的类名

    这可能是一个愚蠢的问题 暴露出对 JNI 缺乏理解 我正在编写一个封装 Java VM 的 C 程序 我使用 CallVoidMethod 等调用来调用 VM 内的函数 这纯粹是背景知识 与问题不太相关 我希望能够找到给定 jclass 实
  • Struts2 排除模式不起作用

    我正在将 struts2 用于基于 GAE 的应用程序 我有一个 servlet 来上传这样的文件 Override protected void doPost HttpServletRequest req HttpServletRespo
  • 如何在Amazon Linux系统中升级ruby版本?

    我使用 padrino ruby 框架开发了 ruby 应用程序 我想将其部署在亚马逊上 我用了这张图片 Amazon Linux AMI 2017 09 1 HVM SSD 卷类型 图像描述是 Amazon Linux AMI 是一个由
  • AWS Lambda:创建触发器

    当我尝试添加触发器时 出现以下错误 创建触发器时出错 配置定义不明确 如果同一事件类型的前缀重叠 则两个规则中不能有重叠的后缀 我不确定这里出了什么问题 原因之一可能是之前使用相同触发器的其他某个 lambda 函数已被删除 这不会自动清除
  • 提交时合并两个表单中的值

    我在一个 html 页面上有两个表单 使用 jQuery 是否可以在提交第一个表单时将两个表单中的数据放入 POST 数据中 jQuery序列化支持多个表单元素 所以可以这样做 form1 form2 serialize 对于你的情况 你可
  • ElasticSearch PutMapping API:MapperParsingException 解析后根类型映射不为空

    我的本地实例上有一个 River ES 1 3 4 和 JDBC For MySql 1 3 4 4 这条河运行良好 并在 ES 中导入数据 我面临的问题是我的字段之一是文本字段并且其中有空格 例如 实时计算器 ES 将其索引为 实时 时间
  • 如何在不使用 IDE 且不了解程序流程的情况下调试应用程序?

    我正在尝试修改优秀书籍提供的朴素贝叶斯分类器的代码集体智慧编程 https rads stackoverflow com amzn click com 0596529325 使其适应 GAE 数据存储 提供的代码使用 pysqlite2 但
  • django 1.3+ 的简单日志到文件示例

    发行说明说 Django 1 3 添加了框架级别 支持 Python 的日志记录模块 那很好 我想利用这一点 很遗憾文档 http docs djangoproject com en 1 11 topics logging 并没有以完整的工
  • 将图标放置在 div 的右上角

    我创建了这段代码 但我无法将图标放在 valori 类的 div 的右上角 这里是期望的结果 这里的代码 HTML div class circletop div class numberpr 3 anno div div class lo
  • 运行 Firebase 模拟器时出现“确定执行环境时出现意外错误”

    当我部署函数时 一切正常 但使用 Firebase 模拟器在本地运行相同的代码会出现以下错误 message Unexpected error determining execution environment request to htt
  • 表单提交复选框将值设置为“on”而不是“true”

    您好 我有一个 html 表单 我通过按钮上的单击事件提交该表单 该事件触发 myform submit 问题是表单上有一个复选框 并且在发布的参数下的 firebug 中它显示 mycheckbox1 on 而不是预期的 mycheckb
  • 在嵌套元组中查找值

    假设我有 t dog Dog cat Cat fish Fish 我需要检查一个值是否位于嵌套元组的第一位 即小写位 中 我怎样才能做到这一点 大写值实际上并不重要 我只想搜索仅包含小写值的字符串 if fish in t print Fi
  • jspdf AutoTable :表格特定行的目标样式

    我正在为我的表格 pdf 使用 jsPDF AutoTable 插件 我的资料来源 javaScriptIncludeTag jspdf min js javaScriptIncludeTag jspdf plugin autotable