links are not fitting with anchor tags

[IamSurendraThota]

i have a large table ( scroll able table ) so i set html2canvas width and height as element scroll able width and height so that it can be render large width table. but the problem is hyperlinks are not rendering with anchor tags. ex : in the table we have link in first row first column but when its render as pdf , first row first column is not clickable looks like image and pdf links alignment both are diffrent,

how can i render large width table as PDF

below is my code :

    const element = document.getElementById('#table');
    // image width as scrollWidth
    const scrollWidth = element.scrollWidth;
    // Image height as ScrollHeight
    const scrollHeight = element.scrollHeight;
    const options = {
      margin: 10,
      filename: 'test.pdf',
      image: { type: 'jpeg', quality: 1.00 },
      html2canvas: {
        width: scrollWidth, height: scrollHeight
      },
      jsPDF: { unit: 'pt', format: 'a3', orientation: 'portrait' },
      enableLinks: true
    };
    html2pdf().from(this.content).set(options).save();

[gracielaPosadas]

I have the same issue, the links are located below of the right location with big screens and also below but different for a small screen. Seems like the location is calculated base on the screen size which is not always acquired if the DOM elements to take the screen shot are always of one size. Any advice to calculate this position?

[sandroden]

I have the same problem if I add opt 'width'. An example on codesandbox is here. I imagine that links are added by html2pdf (ie: nhot jsPDF and not html2canvas), is that correct?, BTW: with some viewer you can see a red frame around links and in the case you set width you see the links in a wrong position (and are clickable)

[eKoopmans]

Hi all, yes it seems that html2pdf does not perform as intended when the htmlcanvas width is set to a custom value. @sandroden thank you very much for the demo, it points out the issue very clearly (and yes, html2pdf adds the links).

So, I'm not sure the best way to proceed. It would help if I had a better understanding why you are changing the html2canvas width. It shouldn't affect the amount of an element that is rendered (as suggested by @Iam-surendra). By my understanding, if you make the canvas larger than default it will just end up with blank space to the right, and decreasing the canvas size means that the image gets cut off (as in @sandroden's example).

So then, what's the goal? My current thinking is that the links should actually stay where they are, and that the image is actually being stretched more than it should be. But in general, I would say that altering the canvas width is currently not supported in html2pdf. If I understand the purpose, I can try to better support it.

Edit: In response to @Iam-surendra's original post, setting the canvas width/height isn't what causes the whole element to be captured. That's actually some internal magic that html2pdf applies. So my suggestion would be to try removing those canvas adjustments and see if it fixes the problem.

[sandroden]

The goal was to get a higher resolution in the resulting pdf. Maybe there are better ways. It was the result of trial and error that gave me 300 dpi in the resulting images. (scale: 8, width: 310). I admit my discomfort in changing values I didn't really understand. In my naïve idea scale: 4 and width: 620 should have been the same, but it's not - going by heart here. In my case, I'm using html2pdf to produce a pdf out of a scaled div (CSS's transform: scale, original width: 1000px) so as to provide a thumbnail of an A4 report. I also noted that the screen dimensions of the div (ie: scaled) are important to get the final resolution. @eKoopmans, thank you very much for your valuable support and for this great piece of software!

[eKoopmans]

Hi @sandroden, no worries! So... did you try scale: 8 without adjusting width? It shouldn't be necessary to adjust width when changing scale, it's automatic. But yes, html2pdf.js currently rescales some things to flow on the page, and I could see that causing issues if you're trying to get a precise result. I intend to add different print "modes" soon, so that the current "reflow" behaviour is not the only option.

[sandroden]

Hi @eKoopmans, yes I tried to scale w/o setting the width and the result is "horrible". The definition is very low and the page is not filled (less than a quarter), if I increment the scale nothing seems to change. Here is the look of the page:

to be compared with

BTW: I get bad results event if I set widht 310 but furthe increment the scale to 18, I really can't make out what scale vs. width does.

Question: what should be the intended api to make a div (say 1000px width) to fill a page? What you mean by the current "reflow" behaviour?

[eKoopmans]

Setting your div to width: 100% will cause it to fill the PDF page. html2pdf.js creates a "container" div that has the width of your PDF document type (e.g. 21.0cm for A4), and puts all of your content inside that container. It behaves best with elements that don't have a fixed size.

That is what I call the "reflow" behaviour, which is the only option currently. I have had other requests for features like "fit-on-one-page", which are valid but I haven't had the chance to implement yet. The reflow behaviour often gets good results, but it's not entirely WYSIWYG.

[sandroden]

Ok, I'll give it a try, but to me, WYSIWYG is really a requirement. While you fill a form you see the result on the right (see the picture) that must not be responsive. That's why I set a fixed width and then I scale it.

[eKoopmans]

Looks very nice. Yes, for many applications a 1:1 copy is important, but for many others it isn't. In the first place if you want to print a whole webpage, it shouldn't look exactly same as in your browser - and when you use "Ctrl-P" it doesn't. The width is shrunk and content reflows. That was the original goal with this project.

That said, this project has grown and changed a lot since then. So yes, I do plan for a "shrink-to-page" option that doesn't change any proportions, but it doesn't exist yet.

Edit: We're getting off the original topic of the positioning of links when the html2canvas width option is altered. Anyone else visiting here, the current advice is to not alter width (there are very few circumstances where it should be necessary). @sandroden please check out the Single-page PDFs project for posts related to our later discussion - and feel free to open another issue related to that topic.

[santhoSanthosh]

Anchor tag cannot work inside

[dineshthiru7]

. That's why I set a fixed width and then I sc

How do u fixed this issue ? I'm struggling last 2 days , pls help any one/

[santhoSanthosh]

use enableLinks : true , anchor link support to your pdf.

. That's why I set a fixed width and then I sc

How do u fixed this issue ? I'm struggling last 2 days , pls help any one/