I am creating a PDF document using jsPDF and I want to Add a Hyperlink inside the HTML it's working fine but when I try to convert it to pdf it simply renders text instead of a hyperlink.
Below is attached the code snippet for the same.
const photo = [
{
imageLink: "https://static.vecteezy.com/packs/media/vectors/term-bg-1-3d6355ab.jpg",
link: "https://static.vecteezy.com/packs/media/vectors/term-bg-1-3d6355ab.jpg",
name: 'Image 1'
}
]
<div id='toRender'>
<div className='photos-header'>
photos
</div>
<div className='row'>
{
photo.map((ele) => {
return (
<div className='col col-sm-12 col-md-12 col-lg-6 mt-3'>
<div className='photo'>
<div className='photo-image'>
<a href={ele.imageLink} download>
<img src={ele.imageLink} alt="" />
</a>
</div>
<div className='photo-link'>
<a href={ele.link}>{ele.name}</a>
</div>
</div>
</div>
)
})
}
</div>
</div>
<button onClick={exportToPdf} className="btn btn-primary">Export</button>
const exportToPdf = () => {
let pdf = new jsPDF('p', 'pt', 'a4');
let pWidth = pdf.internal.pageSize.width; // 595.28 is the width of a4
let srcWidth = document.getElementById('toRender').scrollWidth;
let margin = 20; // narrow margin - 1.27 cm (36);
let scale = (pWidth - margin * 2) / srcWidth;
pdf.html(document.getElementById('toRender'), {
x: margin,
y: margin,
margin: [0, 0, 120, 0],
autoPaging: 'text',
html2canvas: {
scale: scale,
},
callback: function () {
pdf.save("text.pdf");
}
});
}
Below is the output of my generated PDf using JSPDF.
Can anyone help me with the same?