0

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. enter image description here

Can anyone help me with the same?

Bhoomesh Joshi
  • 89
  • 1
  • 1
  • 5

0 Answers0