程序员经验分享-hwhale

jsPDF html 方法使用 addPage 在生成的 PDF 中分割页面

2024-01-01

我在用jsPDF's html为某些由多个段落组成的 html 生成 PDF 的方法p与每个p包含 50-500 个单词。 PDF 是使用我定义的样式正确生成的。我面临的唯一问题是当内容p标签溢出到 PDF 中的新页面，剪切部分文本，如下所示：

为了解决这个问题，我需要介绍addPage到我的代码中，在我希望的地方插入“分页符”。这是一个示例addPage与jsPDF's text功能：

var doc = new jsPDF('p', 'pt', 'letter');
doc.text(20, 20, 'first text');
doc.addPage();
doc.text(20, 20, 'second text');
doc.addPage();
doc.text(20, 20, 'third text');
doc.save();

我想做同样的事html这是我使用的代码：

var doc = new jsPDF('p', 'pt', 'letter');
doc.html($("#p1")[0], {
    callback: function (doc) {
        doc.addPage('letter', 'p');

        doc.html($("#p2")[0], {
            callback: function (doc) {
                doc.save();
            }
        });
    }
});

上面生成了一个 PDF，其中包含所需的 2 页内容。但是应该在第二页上的内容却在第一页上，位于第一页内容的顶部。换句话说，#p2内容粘贴在上面#p1内容。

这是代码片段，但请注意，SO 正在抛出跨域错误当您尝试运行代码时，您需要在外部运行以下代码：

function wrap() {
  var doc = new jsPDF('p', 'pt', 'letter');
  doc.html($("#p1")[0], {
    callback: function(doc) {
      doc.addPage('letter', 'p');
      doc.html($("#p2")[0], {
        callback: function(doc) {
          doc.save();
        }
      });
    }
  });
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://unpkg.com/jspdf@latest/dist/jspdf.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected] /cdn-cgi/l/email-protection/dist/html2canvas.js"></script>

<button id="btn" onclick="wrap()">Test</button>
<div id="lipsum">
  <p id="p1">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed risus at orci elementum consequat. Suspendisse laoreet rhoncus dignissim. Aliquam a ultrices orci, in elementum nibh. Aliquam mollis erat at vehicula pellentesque. Nunc suscipit, leo
    at convallis lobortis, odio ipsum euismod sapien, auctor accumsan velit eros non risus. Cras sagittis nisi non orci finibus porta. Sed finibus ac eros eu tincidunt. Nam viverra egestas augue vestibulum elementum. Suspendisse convallis felis sodales,
    ornare neque ut, elementum dui. Mauris ac orci mattis, tristique nisi quis, ultricies urna. In tincidunt, dolor vitae euismod mattis, lorem arcu placerat velit, quis auctor est est et sem. Aenean convallis finibus posuere. Sed feugiat orci a lacinia
    efficitur. Ut semper, purus quis convallis vehicula, mi risus rhoncus arcu, et feugiat neque turpis non tellus.
  </p>
  <p id="p2">
    Mauris dapibus felis leo, vitae vestibulum purus feugiat sit amet. Fusce ac dapibus nunc. Etiam congue mi neque. Maecenas eget blandit turpis. Suspendisse volutpat, urna eu facilisis congue, elit felis faucibus velit, venenatis semper sem sem ut ante.
    Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent blandit congue sapien. Curabitur non fermentum felis, sit amet auctor nunc. Cras id tellus nunc.
  </p>
  <p id="p3">
    In lacinia lectus nec quam dapibus eleifend. Phasellus iaculis eget massa non aliquam. Cras interdum gravida hendrerit. Suspendisse rhoncus pretium erat non malesuada. Fusce sit amet finibus est. Phasellus quis dapibus orci. Nunc iaculis felis odio, et
    dictum leo mollis sed. Morbi ultrices turpis at mi pellentesque, sit amet consectetur tortor volutpat. Mauris ac nunc ac nunc pellentesque lacinia. Duis at ligula tristique, maximus sapien sit amet, pulvinar neque.
  </p>

</div>

另请注意，使用的版本html2canvasjs在这里很重要。看this https://stackoverflow.com/questions/57376671/jspdf-html-function-returning-blank-pdf-page了解更多信息。


Using this https://artskydj.github.io/jsPDF/docs/modules_html.js.html，特别是模板（第 125-150 行），我找到了一个解决方案，将第二个（后续）页面“移动”到正确的 y (y: 792) 坐标：

function wrap() {
  var doc = new jsPDF('p', 'pt', 'letter');
  doc.html($("#p1")[0], {
    callback: function(doc) {
      doc.addPage('letter', 'p');
      doc.html($("#p2")[0], {
        callback: function(doc) {
          doc.save();
        }, y:792
      });
    }, html2canvas: {scale: 1}
  });
}

其中792是单个字母页的垂直长度。换句话说，p2在具有定义的 y 轴坐标的位置上进行渲染。

人们可以更新上面的代码（递归函数）来为多个执行此操作p元素，甚至根据其他标准拆分页面。我希望这可以帮助别人。

Note: html2canvas: {scale: 1}用于解决我在移动设备上生成的 PDF 的页面缩放问题。

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

javascript

html

jQuery

jspdf

pagebreak

jsPDF html 方法使用 addPage 在生成的 PDF 中分割页面 的相关文章

  • 计算div标签内img标签的数量

    我的代码是这样的 div img src some image png img src some image png div class another div div div class another div div div 我想计算该

  • 根据用户的时间设置问候语（早上好，下午好......）

    任何人都可以推断如何根据用户的时间设置实现基本的 晚上好 或 早上好 也许 PHP 会获取服务器时间 但我希望用基于时间的适当问候语来问候网站访问者 并考虑到他们一天中的时间 E G 早上好 晚上好 下午好 基于它 getHours 日期对

  • Javascript 函数，我如何开始理解它们？

    我完全理解 为了学习 javascript 我需要知道函数是如何工作的 我了解传递参数的基础知识 然后使用值调用函数以将某些内容添加到一起 等等 我读过无数关于函数的文章 例如以及书籍等 但我只是不明白它们是如何使用的以及何时应该使用它们等

  • 如何停止在 div 外部显示图像

    考虑这段代码 div style width 100px height 100px border 1px solid black div img src http rabbitempire org wp content uploads Pe

  • Jasmine 单元测试不等待承诺解析

    我有一个有角度的服务 它具有像这样的异步依赖项 function angular module app factory myService q asyncService function q asyncService var myData

  • GWT - 让 CellTable 单元格使用 HTML？

    我有一个 CellTable 我想将 HTML 代码放入单元格中 以下代码不起作用 空格已从输出中删除 TextColumn

  • Angular2 - 防止复选框被选中

    我有一个每行包含一个复选框的表 在表头中 我有一个Check All切换所有表格行框的复选框 我正在尝试实现一些逻辑 如果复选框的数量将超过特定限制 则显示错误并且不切换表行复选框或checkall盒子本身 有一个问题允许checkAll即

  • IE9 中的 HTML5 视频两侧显示黑色边框

    我在我的网站中使用 HTML5 视频标签 该视频在所有浏览器中都能完美播放 但在 IE9 中它显示黑色边框 黑色扩展名 就像通常情况下 当播放器的大小大于视频的大小时 视频播放器会在其两侧显示一些黑色扩展 这是我们使用的解决方案 对于视频

  • 特别更改画布上的笔画不透明度，但不更改颜色

    我有一个漂亮整洁的脚本 可以循环显示颜色 并且与 xxxxxx格式 但我想改变透明度 有没有办法做到这一点 我指的是ctx strokeStyle 这是当前的代码 canvas strokeStyle 16777215 s length i

  • 如何使用 Ajax 在 Flask 中发布按钮值而不刷新页面？

    我有一个问题 当我单击 Flask 应用程序中的按钮时 我想避免重新加载 我知道有 Ajax 解决方案 但我想知道如何将我的按钮链接到 ajax 函数以发布按钮值并运行链接到其值的 python 函数 这是我的 html 按钮 div di

  • 如何应对 WebStorm 中大量未解决的变量警告？

    我有一个从服务器获取数据的函数 function getData data console log data someVar 网络风暴说someVar是一个未解决的变量 我怎样才能摆脱这样的警告 我看到几个选项 禁止 IDE 设置中的警告

  • 谷歌绘制具有相同比例的多个系列的图表

    我正在寻找一种在图形上显示多个系列的方法 这些系列具有相同的比例但仅显示一次 正如你在这里看到的 http jsfiddle net Youkoal d3xwnqdu http jsfiddle net Youkoal d3xwnqdu 我

  • 如何使用 jQuery 检测浏览器是否关闭

    我需要使用 jQuery 检测浏览器是否被关闭 如果是这样 则执行一个事件 我的网站上有一个聊天功能 很像 Facebook 可以让用户在导航到网站结构中的其他页面时保持登录状态 但如果他们单击 则需要将他们从聊天中注销 这样他们就不会在线

  • CSS 或 Javascript - 如果背景图像未加载，则显示后备文本[重复]

    这个问题在这里已经有答案了 如果徽标图形文件未加载或丢失 如何显示文本而不是徽标 我有带有背景 PNG 图像的 div div class iHaveBgImage this text should be displayed if bg i

  • 带有延迟的 jQuery 切换类只能运行一次

    当涉及到 jQuery 匿名函数和延迟时 我显然错过了一些基本的东西 下面的代码每次页面加载只能运行一次 它将添加该类 然后在 1 秒后将其删除 如果我再次单击 它将添加该类 但在页面持续时间内永远不会删除该类 除非我重新加载页面 var

  • WebCore::UserGestureIndicator::processingUserGesture 中的 EXC_BAD_ACCESS (SIGSEGV)

    我有一个使用 UIWebView 和 HTML5 websockets 构建的 iOS 应用程序 该应用程序经历了看似随机的崩溃 它发生在用户与其交互时以及在用户和应用程序之间没有发生交互的寿命测试期间 崩溃日志都有以下内容 Excepti

  • 如何运行 Mike Bostock 的 D3 示例？

    我一直在尝试经营迈克博斯托克透视地球仪 http bl ocks org mbostock 6747043例如 但是如果您尝试在本地重现它 则对其 json 文件的引用是不正确的 问题来自于这行代码 d3 json mbostock raw

  • 跨浏览器相当于explicitOriginalTarget事件参数

    有谁知道跨浏览器等价于explicitOriginalTarget事件参数 该参数是 Mozilla 特定的 它为我提供了导致模糊的元素 假设我的页面上有一个文本输入和一个链接 文本输入具有焦点 如果我点击链接 文本输入的模糊事件会通过ex

  • 如何在输入时格式化 contenteditable div？

    我正在尝试编写一个函数 允许 contenteditable div 在用户输入 div 时执行一些自动格式化 到目前为止我只能让它在 IE 中运行 有人可以帮助我吗 function formatOnKeyUp if window get

  • JavaScript 开关（真）

    你好 我正在尝试处理 ajax json 响应 这是我的代码 success function j switch true case j choice1 alert choice2 break case j choice2 alert ch

随机推荐

热门标签