HTML 到 PDF(通过 javascript)如何添加 css 或表格?

2024-02-04

在一个项目中,我已将 html 文件转换为 pdf,效果很好。但是此输出未显示 css 设计。现在我需要建议如何使用此 pdf 文件添加 css 设计?

这里是js函数代码:

 $(function(){
         var doc = new jsPDF();
    var specialElementHandlers = {
        '#editor': function (element, renderer) {
            return true;
        }
    };

    $('#cmd').click(function () {
        doc.fromHTML($('#StudentInfoListTable').html(), 15, 15, {
            'width': 170,
                'elementHandlers': specialElementHandlers
        });
        doc.save('sample-file.pdf');
    });

我从这个项目中得到了帮助https://github.com/MrRio/jsPDF https://github.com/MrRio/jsPDF

This is my table looking enter image description here

这是pdf输出

我尝试添加一个表

$('#cmd').click(function () {

        var table = tableToJson($('#StudentInfoListTable').get(0))
        var doc = new jsPDF('p', pt, 'a1', true);
        doc.cellInitialize();
        $.each(table, function (i, row){
            console.debug(row);
            $.each(row, function (j, cell){
                doc.cell(10, 50,120, 50, cell, i);  // 2nd parameter=top margin,1st=left margin 3rd=row cell width 4th=Row height
            })
        })


        doc.save('sample-file.pdf');
    });

这是函数

function tableToJson(table) {
    var data = [];

    // first row needs to be headers
    var headers = [];
    for (var i=0; i<table.rows[0].cells.length; i++) {
        headers[i] = table.rows[0].cells[i].innerHTML.toLowerCase().replace(/ /gi,'');
    }


    // go through cells
    for (var i=0; i<table.rows.length; i++) {

        var tableRow = table.rows[i];
        var rowData = {};

        for (var j=0; j<tableRow.cells.length; j++) {

            rowData[ headers[j] ] = tableRow.cells[j].innerHTML;

        }

        data.push(rowData);
    }       

    return data;
}

看到这个输出后我哭了!

有什么办法可以避免这种重叠吗? 在pdf中添加css的最佳解决方案是什么?


好的,经过多次尝试,我已经解决了它。特别感谢 mihaidp,这是我解决表行问题的代码

$('#cmd').click(function () {
        var table = tableToJson($('#StudentInfoListTable').get(0))
        var doc = new jsPDF('p', 'pt', 'a4', true);
        doc.cellInitialize();
        $.each(table, function (i, row){
                doc.setFontSize(10);

                $.each(row, function (j, cell){
                if(j=='name')
                {
                    doc.cell(10, 50,100, 30, cell, i);
                }
                else if(j=='email')
                {
                    doc.cell(10, 50,130, 30, cell, i);
                }
                else if(j=='track')
                {
                    doc.cell(10, 50,40, 30, cell, i);
                }
                else if(j=='s.s.croll')
                {
                    doc.cell(10, 50,51, 30, cell, i);
                }
                else if(j=='h.s.croll')
                {
                    doc.cell(10, 50,51, 30, cell, i);
                }
                else 
                {
                    doc.cell(10, 50,70, 30, cell, i);  
                }
            })
        }) 

After solve here the output enter image description here

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

HTML 到 PDF(通过 javascript)如何添加 css 或表格? 的相关文章

  • jQuery - 拖动div css背景

    我希望能够在 div 内按住鼠标并移动它的背景 在谷歌上搜索了很多 没有找到我想要的 这是目标 显示的地图是要拖动的对象 http pontografico net pvt gamemap http pontografico net pvt
  • 无法从 Twin.macro 中的 Prop 获取值

    您可以在这里查看我正在尝试执行的操作的示例 https codesandbox io s vibrant leaf qj8vz https codesandbox io s vibrant leaf qj8vz 注意 这个特定的例子使用双宏
  • 如何使用 jQuery UI Sortable 正确相交?

    这是我对 jQuery UI Sortable 进行动画处理的尝试 https codepen io anon pen YdMOXE https codepen io anon pen YdMOXE var startIndex chang
  • 将 ESLint 与 Airbnb 样式和选项卡结合使用 (React.js)

    我正在开发一个 React js 应用程序 并且正在尝试检查我的代码 我将 ESLint 与 Airbnb 风格一起使用 但出现以下错误 src Test jsx 4 2 error Unexpected tab character no
  • 无法做到最大宽度

    我有一个页面 内容如下 div testingtestingtestingtestingtestingtestingtestingtestingtesting testingtestingtestingtestingtestingtesti
  • 从 3.1 返回后加载 Rails 3(服务器)时出现问题

    Rails 完全菜鸟 我正在使用 Hartl 教程 到了第 4 章 CSS 4 1 2 一切看起来都很顺利 但遇到了一个问题 使页面上的文字看起来
  • 测量填写部分的时间 - 谷歌表单

    我正在尝试使用谷歌表单进行研究调查问卷 对于某些部分 我想自动测量用户填写所需的时间 谷歌表单中没有这样的选项 我尝试复制表单源 并用 javascript 填充时间 但它不起作用 跨源问题 未能成功托管复制的表单 如何做到 我如何衡量回答
  • 是否可以让 webpacks System.import 使用 ajax (用于进度事件)?

    所以我刚刚更新到 webpack 2 并进行了第一个工作设置 其中 webpack 通过查看 System import 调用自动创建块 相当甜蜜 但是 我使用 ajax 调用加载初始块 以便我可以加载时显示进度 https stackov
  • 我将 X Y Z 坐标转换为屏幕 X Y 坐标有什么问题吗?

    我正在制作 3D 空间中弹跳的球体的 HTML5 Canvas 演示 这非常简单 每个球都有 X Y 和 Z 坐标 然后 这些坐标将转换为我在此处阅读的屏幕 X 和 Y 坐标 http answers google com answers
  • 替换打字稿中字符串中字符的所有实例?

    我正在尝试用 x 字符替换电子邮件中的所有句号 例如 电子邮件受保护 cdn cgi l email protection 将变为 myxemail emailxcom 电子邮件设置为字符串 我的问题是它不只是替换句号 而是替换每个字符 所
  • 如何修复带有单个道具的括号的 prettier 和 tslint 错误?

    我使用 prettier 和 tslint https github com alexjoverm tslint config prettier https github com alexjoverm tslint config prett
  • iframe 位置居中

    所以我找到了这段用于将内容放在中心的代码 但我的问题是它是为容器制作的 你知道如何为 iframe 制作它吗 或者你知道另一个代码吗 代码 center margin auto width 60 border 3px solid 73AD2
  • Skrollr 添加空白

    我已经尝试了一切 我在谷歌上阅读了 4 5 页试图找到适合我的修复程序 已经筋疲力尽了 即使我使用 skrollr 示例 我的问题仍然存在 不是说他们做错了什么 我知道我只是没有正确理解它 因此 我上传了一个演示 仅在移动设备上展示这个尴尬
  • 使用 Javascript 检测 Pepper (PPAPI) Flash

    我们使用的是专有的文档查看器 它与某些 Chrome 版本中的 Pepper 版本的 Flash 配合得不太好 所以我希望能够检测到它并重定向到不同格式的相同内容 由于这个版本似乎落后于 NPAPI 版本 所以我一直在使用闪光检测 http
  • 如何在 WebView 中添加 JavaScript 函数并稍后在提交 reCAPTCHA 时从 HTML 调用它

    我在 WebView 中添加一个 JavaScript 函数 如下所示 Kotlin val webView findViewById R id webview as WebView webView getSettings setJavaS
  • 当td内容太宽时,表格溢出父div

    我准备了一个 JSFiddle 来解释 向你展示我的问题 http jsfiddle net nz96C http jsfiddle net nz96C 乍一看还不错 但是当我添加一些文本时 firsttd一旦使用 tds 整个宽度 整个表
  • 如何用时刻找到与给定时间最接近的时间?

    所以我有一个简单的代码 一个工作代码 它使用 moment 获取最接近给定时间的时间 Current time in millis const now moment 10 16 HH mm format x List of times co
  • 快速响应的交互式图表/图形:SVG、Canvas 还是其他?

    我正在尝试选择正确的技术来更新一个项目 该项目基本上在可缩放 可平移的图表中渲染数千个点 当前使用 Protovis 的实现性能不佳 在这里查看 http www planethunters org classify http www pl
  • 将一维数组转换为二维数组[重复]

    这个问题在这里已经有答案了 我正在开发一个程序 我必须将文本文件中的值读入一维数组 我已经成功获取该一维数组中的数字 m1 1 2 3 4 5 6 7 8 9 但我希望数组是 m1 1 2 3 4 5 6 7 8 9 您可以使用此代码 co
  • 开玩笑 setTimeout 不暂停测试

    it has working hooks async gt setTimeout gt console log Why don t I run expect true toBe true 15000 我已经查看了这个答案 Jest 文档和几

随机推荐

  • 不兼容类型 - 发现:int 必需:boolean

    如果第一个数字输入等于第二个输入 我试图显示 EQUIVALENT 我的代码有什么问题吗 import java io public class TwoNum public static void main String args int
  • 从位于 docker 容器中的服务访问主机数据库

    如果我有一个在主机 操作系统 Linux 上运行的 Postgres 数据库 并且在 docker compose 的容器中运行一些服务 如何从容器中的服务访问数据库 docker compose 中服务的 yaml 文件应该是什么样子 在
  • 新的 PayPal 沙盒 - 疯狂的事情 [关闭]

    很难说出这里问的是什么 这个问题是含糊的 模糊的 不完整的 过于宽泛的或修辞性的 无法以目前的形式得到合理的回答 如需帮助澄清此问题以便重新打开 访问帮助中心 help reopen questions Paypal 的人改变了一些东西 在
  • PHP版本升级5.3.25至5.6

    我们需要将 PHP 版本 5 3 25 升级到当前稳定版本 5 6 17 因此 为此我们需要找到最好的方法 逐步的方法 我们可以从5 3 X升级到5 4 X 5 4 X到5 5 X等等 直接升级 这里我们直接从5 3 X升级到5 6 X 除
  • Pandas 在 Windows 终端中绘图

    我有一个简单的熊猫数据框 尝试从 IPython 的 Windows 10 终端会话进行绘图给出了以下结果 In 4 df pd DataFrame Y 1 3 5 7 9 X 0 2 4 6 8 In 5 df Out 5 X Y 0 0
  • mongodb 转储并通过管道连接到其他数据库名称

    Mongodb 版本 3 2 12 我有两个本地数据库 base1 和 base2 我想将所有数据 所有集合 从base1复制到base2 替换那里的所有内容 就像将生产转储到开发环境时一样 任何管道命令 或其他简单的方法 可以做到这一点
  • 将鼠标悬停在类上并修改另一个类

    我有一个网格布局 里面是一个宽度为 64px 的侧边栏 网格 container display grid height 100vh width 100vw grid template areas sidebar header sideba
  • 比较浮点数与 numpy 和 scipy

    numpy 或 scipy 模块中是否有 epsilon 常量 如 Matlab 中的 来比较浮点数 您可以使用np finfo http docs scipy org doc numpy reference generated numpy
  • 重复加载同一张图像

    我的网站的 cms 部分有一个页面 启用了 JavaScript 可以强制选择浏览器 它是一个包含大量图像的日历 img src 1 gif img src 1 gif img src 1 gif img src 1 gif img src
  • 查找跨越文本的多行并使用 PowerShell 进行替换

    我正在使用正则表达式搜索来匹配和替换一些文本 文本可以跨越多行 可能有也可能没有换行符 目前我有这个 regex lt php eval gt Get ChildItem exclude bak Where Object Attribute
  • 在 Eclipse 中添加应用程序启动快捷方式?

    我在 Eclipse 中进行 Android 编程已经大约一年了 我总是通过在项目资源管理器中右键单击我的项目名称 然后依次选择 运行方式 和 Android 应用程序 来启动我的应用程序 一定有更好的方法 有没有办法改变这个 点击三下鼠标
  • IE 输入类型日期未显示为日期选择器[重复]

    这个问题在这里已经有答案了 我在 HTML 中使用输入类型 DATE 在 Chrome 和 Firefox 中一切正常 但 IE 不显示日期选择器 当我使用 JQuery Datepicker 时 我在 Chrome 和 Firefox 中
  • 如何为所有的nosetests测试定义一个设置函数?

    我正在使用带有 python 的谷歌应用程序引擎 并想使用nosetest运行一些测试 我希望每个测试都运行相同的设置功能 我已经进行了很多测试 所以我不想遍历所有测试并复制并粘贴相同的功能 我可以在某处定义一个设置函数并且每个测试都会首先
  • HANDLE 类似于 Linux 中的文件描述符吗?

    HANDLE 类似于 Linux 中的文件描述符吗 据我所知 HANDLE用于处理Windows上的所有资源 例如字体 图标 文件 设备 它本质上只是一个指向保存特定资源数据的内存块的空指针 是的 Windows 句柄与 Unix 文件描述
  • 输出神经元是 1 个好还是 10 个好?

    最好有 1 个输出神经元 输出 0 到 15 之间的值 这将是我的最终值 or 16 个输出神经元输出 0 到 1 之间的值 该值代表该值的概率 示例 我们想通过输入学生的学习小时数和智商来找出他的成绩 范围从 0 到 15 TL DR 我
  • Android Studio:如何查看 android 支持 v4 和 v7 的来源?

    在Android Studio支持库中appcompat 对于 ActionBar 被定义为 Gradle 依赖项 dependencies compile fileTree dir libs include jar compile com
  • 使用 Spring Roo 创建列表 <> 成员

    The 春罗 http www springsource org roo命令field set创建一个 Set 成员 字段集 字段名称 类型 如何创建一个 List 呢 从最新版本 1 2 4 开始 roo 支持列表 field list
  • 字符串包含无效或不受支持的 UTF8 代码点。错误的 UTF8 十六进制序列:

    团队 我正在使用红移版本 8 0 2 使用 COPY 命令加载数据时 出现错误 字符串包含无效或不受支持的 UTF8 代码点 错误的 UTF8 十六进制序列 bf 错误 3 似乎 COPY 试图将 UTF 8 bf 加载到 VARCHAR
  • 如何使用时间戳判断现在是白天还是晚上

    我想从数据框中的 时间戳 列中找出是白天还是晚上 时间戳列的值如下 20 0 14 30 6 15 5 0 4 0 等 我使用了 for 循环 但它白天和晚上随机生成 for x in data timestamp if x gt 12 0
  • HTML 到 PDF(通过 javascript)如何添加 css 或表格?

    在一个项目中 我已将 html 文件转换为 pdf 效果很好 但是此输出未显示 css 设计 现在我需要建议如何使用此 pdf 文件添加 css 设计 这里是js函数代码 function var doc new jsPDF var spe