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() 来计算电子邮件文本宽度
- 计算文本宽度与 70 的差异,使用间距将避免裁剪文本
- 根据文本宽度调整间距将避免其他文本部分出现间距
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>
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)
我正在尝试将一些项目向右对齐,以防冗长的文本将其向左对齐
所以我添加了
///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() 来计算电子邮件文本宽度
- 计算文本宽度与 70 的差异,使用间距将避免裁剪文本
- 根据文本宽度调整间距将避免其他文本部分出现间距
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>
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)