使用 jspdf 导出 PDF 而不渲染 CSS

2023-12-04

我正在使用 jspdf.debug.js 从网站导出不同的数据,但存在一些问题,我无法让它在导出的 PDF 中渲染 CSS,如果我在导出的页面中有图像,则PDF 返回空白...

有谁知道解决这个问题的方法吗?

这里有一个jsfiddle显示它没有渲染 CSS

还有我的剧本

$(document).ready(function() {
$('#export').click(function(){
var d = new Date().toISOString().slice(0, 19).replace(/-/g, ""),
        filename = 'financiar_' + d + '.pdf',
        pdf = new jsPDF('p', 'pt', 'letter'),
        specialElementHandlers = {
          '#editor': function( element, renderer ) {
              return true;
          }
    };
    pdf.fromHTML(
          $('.export').get(0) // HTML element
        , 25  // x coord
        , 25  // y coord
        , {
              'width': 550 // was 7.5, max width of content on PDF
            , elementHandlers: specialElementHandlers
        }
    );
    pdf.save( filename );
})
});

据我所知,jsPDF 不能与 CSS 一起使用,这也是我面临的同样问题。

为了解决这个问题,我使用了Html2Canvas. Just 添加 HTML2Canvas JS然后使用pdf.addHTML()代替pdf.fromHTML().

这是我的代码(没有其他代码):

 var pdf = new jsPDF('p', 'pt', 'letter');
 pdf.addHTML($('#ElementYouWantToConvertToPdf')[0], function () {
     pdf.save('Test.pdf');
 });

祝你好运!

Edit:参考这条线如果你没有找到.addHTML()

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

使用 jspdf 导出 PDF 而不渲染 CSS 的相关文章

  • CSS:仅背景不透明度,而不是内部文本[重复]

    这个问题在这里已经有答案了 我有这个注册表框 我真的很喜欢背景如何变得不透明 透明为 25 85 但后来我注意到文本和表单元素也变暗了一点 所以我想知道如何做到这一点只有边框和背景而不是盒子里面的东西 regForm z index 11
  • 使用 jQuery 在元素末尾添加“更多”html?

    我一开始有一个空的 div div div 我知道如何使用 jQuery 第一次将 html 添加到我的空 div 中 mydiv html my html 但我的问题是我不知道如何在非空 div 末尾推送更多 html div my ht
  • 垂直对齐材质图标

    我正在尝试在导航菜单中垂直对齐 下拉箭头 我尝试过各种方法 例如vertical align middle display inline block 之类的东西 但这根本没有帮助 http img02 imgland net jfCmDoW
  • 如何使用 jQuery 将各种元素包装在 div 标签中?

    我有一个 html 结构 如下所示 h5 Title h5 p Content p ul li Item li li Item li ul p Content p h5 Title h5 p Content p ul li Item li
  • 使用 jQuery UI 图标

    jQuery UI 在精灵图像中提供了方便的图标 看到主题滚轮 http jqueryui com themeroller 我有一个input我想要时钟图标的元素 带有类 ui icon clock 作为背景图像 怎样才能有一个背景图标in
  • 如何重定向到另一个页面并从表中传递 url 中的参数?

    如何重定向到另一个页面并从表中传递 url 中的参数 我在龙卷风模板中创建了类似的东西 table thead tr th Username th th Nation th th Rank th th th tr thead tbody f
  • jQuery 选择器在控制台中不起作用

    我一辈子都无法解决这个问题 我正在运行 js 容器状态 是页面上正在运行的 js 的控制台日志 它显示一个选择器 但如果我想在控制台中执行任何操作 它只会返回 null 我假设我在某个地方过度编写了 jQuery 函数 就好像我调用了 jQ
  • LESS CSS 在媒体查询中设置变量?

    我正在开发一个专门针对 iPad 的网站 为了使我的网站能够在视网膜显示屏 iPad 和旧版本 iPad 上运行 我想在媒体查询中的 LESS CSS 中设置一个变量 例如 media all and max width 768px rat
  • 输入元素可滚动并启用文本溢出省略号

    当我添加text overflow ellipsis对于输入元素 该元素是可滚动的 当我将光标放在元素上时 我可以左右滚动 就好像文本是全宽并且没有被截断一样 尽管后面没有文本 我该如何阻止这种行为 input width 180px te
  • 带有子节点的拖放区域

    我有一个带有多个子节点的拖放区域 主要元素有dropenter and dropleave事件 但是 如果您将文件拖动到主元素内部和子节点上方 则dropleave被触发 如何处理 以便dropleave仅当拖动的元素和鼠标位于主元素之外时
  • 如何将 jquery 添加到 Appcelerator Titanium Mobile Work?

    是否可以将 jquery 集成到 Titanium Appcelerator 中并且它可以正常工作吗 否则我们不能将jquery集成到titanium appcelerator中 有人帮助我吗 你到底想做什么 我不确定它在没有 DOM 的情
  • 创建响应式眼睛焦点图标

    我一直在尝试制作响应式彩色眼睛焦点图标 但到目前为止我所尝试的一切均不成功 我试图在某种程度上复制真眼的颜色 我使用边框 框阴影来获取颜色 但该部分没有缩放 也尝试过轮廓 但也失败了 那个甚至不是圆的 div 的高度当前是静态的 但我希望它
  • iOS 11 getUserMedia 不起作用?

    苹果公司发表声明称getUserMedia将在 iOS 11 上完全正常运行 安装 iOS 11 Beta 版本 5 后 我确实收到一条消息 表明我的网站请求访问我的相机和麦克风 但似乎是这样的 video src window URL c
  • QUnit 与固定装置的奇怪行为,测试交替失败和通过

    我在 QUnit 中进行了以下设置 Dozen or so previous tests here test Test some markup generation function qunit fixture plugin jQuery
  • 如何在 jQuery 中选择时对 DOM 元素进行排序?

    我的页面上有以下 DIV div Div 3 div div Div 2 div div Div 1 div div Div 6 div div Div 5 div div Div 4 div 我正在尝试使用 jQuery 代码选择 Div
  • 使 div 的大小与其内部图像的大小相同

    我有一个带有以下代码的div HTML div img src img logo png div CSS div imgContainer width 250px height 250px padding 13px 问题是用户可以编辑图像大
  • Jquery 点击事件在设备(ipad、iphone ..)中的 li 上不起作用

    Jquery 单击事件在设备中的 li 上不起作用 我尝试使用 click 和 touchstart 事件 但是使用 touchstart 时的问题是我无法向下滚动 div 当我尝试通过单击 li 向下滚动时 它会被选中 有没有办法使用任何
  • 使用带有箭头的 MaterializeCSS 轮播 - 如何使用普通 javascript 进行初始化

    我正在尝试使用 MaterializeCSS 创建带有箭头的轮播 我正在尝试使用这个代码笔 https codepen io Paco Cervantes pen ZLxKpj取得有限的成功 我想使用普通的 javascript 而不是 j
  • Chrome 上的 contenteditable 中未显示编辑光标

    当您打开此页面时 请参阅现场演示 http jsfiddle net gs3p1a6r 3 show 与 Chrome span span CSS myspan border 0 outline 0 JS myspan focus the
  • 如何防止IE11弹出(您确定要离开此页面)

    我正在处理一个页面 除了一个下拉菜单可供选择外 我无需输入任何内容 但在 IE11 中 当我尝试转到下一页时 它会弹出该消息 我想阻止这种弹出的发生 所以我只是想知道 IE11 中弹出窗口的默认行为是什么 因为它不会出现在 Chrome 或

随机推荐

  • ASP.Net 母版页和文件路径问题

    我正在尝试在我的母版页中添加对 jQuery 的脚本引用 以便它适用于任何页面 目前看起来像这样 问题是路径始终相对于执行的 aspx 页面 因此仅当 jquery js 文件位于同一文件夹中时才有效 为了使其工作 我必须将该行更改为 这显
  • 类名实例而不是数据 - Dart/Flutter

    我得到的是 DeviceClass 的实例 而不是实际的数据字段 这是我的数据模型 import package meta meta dart import dart convert Device deviceFromJson String
  • 在 NumPy 中使用频率数组检索数组元素

    我有一个数字数组 a 我有第二个数组 b 指定我想要检索相应元素的次数a 如何才能实现这一目标 在这种情况下 输出的顺序并不重要 import numpy as np a np arange 5 b np array 1 0 3 2 0 d
  • Android 谷歌地图 java.lang.NoClassDefFoundError: 解析失败: Lorg/apache/http/ProtocolVersion

    我正在使用 Google 地图 Android SDK 11 6 2 也尝试过 15 0 1 但在地图显示之前出现以下崩溃 已检查清单中的API密钥 它是可用的 但仍然出现此问题 我的 targetSDk 版本为 28 是否会导致此问题 j
  • 如何获取表或视图中的列列表?

    有时 我有兴趣获取 SQL Server 2008 R2 数据库中的一个表或视图中的列列表 例如 如果您在不使用昂贵的现成产品的情况下构建数据库文档 那么它很有用 获取此信息的简单方法是什么 另一种方法是查询 INFORMATION SCH
  • 在 Unity 中打电话?

    我在我的 C 脚本中使用了 Application OpenURL tel 79011111115 出现拨号器 但未拨打电话 如果是 Java 我可以说它的工作原理如下 Intent call new Intent Intent ACTIO
  • 如果对象返回为空字符串而不是空结构,如何解组 json 对象

    我收到一些 JSON 数据 但如果对象为空 它不会返回空结构 而是返回空 字符串代替 并且在解组时 它返回一个错误 所以而不是数据 key is key 即使使用 omitempty 字段也不起作用 例子 https play golang
  • 将数据从 PostgreSQL 传输到 MySQL

    您好 有什么方法可以将表布局和数据从 Postgres 数据库自动传输到 MySQL 吗 我必须将架构和数据迁移到 MYSQL 最简单的可能是使用 Postgres 将数据库 架构和数据 导出为 SQLpg dump效用 那么import将
  • 实体框架 4:多对多关系 IQueryable 而不是 ICollection

    大家 早安 我试图首先解决我在 EF 代码中遇到的问题 我的架构如下 public class Article IUrlNode Key public Guid ArticleID get set public string Title g
  • 为什么arguments.callee.caller.name未定义?

    为什么这不提醒 http 127 0 0 1 sendRequest 可在http jsfiddle net Gq8Wd 52 var foo sendRequest function alert bar getUrl var bar ge
  • docker: MISCONF Redis配置为保存RDB快照

    与此类似的问题还有很多 例如 Redis配置为保存RDB快照 但目前无法持久保存在磁盘上 Ubuntu Server MISCONF Redis 配置为保存 RDB 快照 但目前无法保留在磁盘上 可能修改数据集的命令被禁用 但这些都不能解决
  • 具有不同构造函数参数的装饰器

    我想使用温莎城堡创建一个记录整数的类 但我想用其他类来装饰它几次 如果涉及的所有具体实体都具有可以解决的依赖关系 我可以看到这是如何工作的 但这里的情况并非如此 考虑这段代码 public interface IRecorder void
  • 通过用麦克风录制播放声音来测量扬声器音量

    我想通过播放声音并同时在本地麦克风上收听来测量系统的扬声器音量 这是针对特定应用的 准确记录的声音并不重要 重要的是区分播放声音之前和播放过程中记录的麦克风音量 这个想法是在扬声器关闭或声音太低时警告用户 如何在播放声音时录制声音并确定音量
  • jQuery Zoom 在颜色框内

    是否可以在 colorbox 中使用 Jack Moore 的 jQuery Zoom 插件 document ready function a photo zoom url photo big jpg 我很确定你可以这样做 a color
  • 我如何在 Haskell 中使用lens来复制Python的枚举?

    蟒蛇的枚举在列表上可以写成zip 0 我查看了 Control Lens Traversal 和 Control Lens Indexed 但我无法弄清楚如何使用镜头将其推广到任何合理的容器 我犹豫是否要说 可遍历 我正在猜测itraver
  • 更改对象上的修改子句错误

    我怎样才能 用达夫尼语 陈述 ensures 保证方法返回的对象将是 新的 即不会与其他地方使用的对象相同 尚未 以下代码显示了一个最小的示例 method newArray a array
  • 使用 Google GCM 发送推送通知

    我一直在关注设置 GCM 客户端应用程序教程并尝试了解他们提供的演示应用程序 但我无法理解如何使用此服务发送推送通知 上述指南引导我进入 生成 InstanceID 令牌 屏幕 其中有永无休止的进度条 该程序源码可以在这里获取 https
  • 如何将目录树添加到 ClearCase 存储库?

    我有一个包含子目录的目录树 我想将其添加到 ClearCase 存储库中 目前我需要重命名目录 对每个目录使用 CC 的 mkdir 等等 有没有办法自动执行此操作 可能是我不知道的 ClearCase 命令 或者脚本 我建议使用clear
  • 从字符串 Pandas 数据框中提取日期

    我在 pandas 数据框中有这一列 Date X 它是一个对象 我无法在这里使用 pandas to datetime 函数 我想将此列转换为 1 到 365 的范围 以便我可以进行分析 29JAN14 21 16 00 01FEB14
  • 使用 jspdf 导出 PDF 而不渲染 CSS

    我正在使用 jspdf debug js 从网站导出不同的数据 但存在一些问题 我无法让它在导出的 PDF 中渲染 CSS 如果我在导出的页面中有图像 则PDF 返回空白 有谁知道解决这个问题的方法吗 这里有一个jsfiddle显示它没有渲