jspdf向右浮动项目

Jspdf floating items to the right

我正在尝试将一些项目向右对齐,以防冗长的文本将其向左对齐

所以我添加了

///others

doc.setFontType("bold");
doc.setFontSize(9);
doc.setTextColor("#52575A")
doc.text(doc.internal.pageSize.getWidth()-70, 17, "Email: testhere@testingahugeandlengthyemail.com");
doc.text(doc.internal.pageSize.getWidth()-70, 22, "Tel: 83473487348347834734843");
doc.textWithLink('Website: https://test.test.com',doc.internal.pageSize.getWidth()-70 , 27, { url: 'https://ecommerce.soradius.co.ke' });
 doc.save('test.pdf')

以上代码生成pdf

根据上面的代码,我将我的文本设置为距页面宽度 70 像素,从而使我的文本向左对齐。

当电子邮件中的文本增加时,它会被裁剪掉。如何将文本设置到右侧并使其向左扩展。

我检查了 但仍然没有正确对齐

要达到预期结果,请使用以下选项使用 jspdf 单位和 doc.getTextWidth() 来计算电子邮件文本宽度

  1. 计算文本宽度与 70 的差异,使用间距将避免裁剪文本
  2. 根据文本宽度调整间距将避免其他文本部分出现间距

var content = document.getElementById('txtContent'),
button = document.getElementById('btnDownload');

function generatePDF(){
  var doc = new jsPDF('p', 'mm','a4');

doc.setFontType("bold");
doc.setFontSize(9);
doc.setTextColor("#52575A")
  let width = doc.internal.pageSize.getWidth()
  let emailText = "Email: testhere@testingahugeandlengthyemail.com"
  let txtWidth = doc.getTextWidth(emailText) > 70 ? doc.getTextWidth(emailText) - 70: 0;
  console.log("width", width, txtWidth)
doc.text(width - 70 - Math.ceil(txtWidth), 17, emailText);
doc.text(width-70, 22, "Tel: 83473487348347834734843");
doc.textWithLink('Website: https://test.test.com',width-70 , 27, { url: 'https://ecommerce.soradius.co.ke' });
 doc.save('test.pdf')
}

button.addEventListener('click', generatePDF);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.min.js"></script>
<h1>jsPDF Demo</h1>

<textarea id="txtContent" cols="60" rows="15"></textarea>
<br />
<button id="btnDownload"> Download PDF </button>

codepen- https://codepen.io/nagasai/pen/yrxZOY

Hope this answers helps for someone facing the same issue

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre><code>    var str = 'Page 1 of 1'
    var pageSize = doc.internal.pageSize
    var pageHeight = pageSize.height ? pageSize.height : pageSize.getHeight()
    var pageWidth = doc.internal.pageSize.width || doc.internal.pageSize.getWidth();
    var txtwidth = doc.getTextWidth(str);               
    doc.text(str, pageWidth - (data.set`enter code here`tings.margin.left * 2) - txtwidth, pageHeight - 10)
[Got Expected Output][1] [1]: https://i.stack.imgur.com/jKAxi.png