christopherdro / react-native-html-to-pdf

Convert html strings to PDF documents using React Native
MIT License
434 stars 267 forks source link

hyper link not working. #224

Closed Osamasomy closed 2 years ago

Osamasomy commented 3 years ago

Its works fine and convert html to pdf perfectly but Im unable to click the link I tried button which also not working the conversion of the pdf. Any solution?

const options = {
        html: `<a href="https://anylink.com" >Click me</a>`,
        fileName: "filename"
      };

      let file = await RNHTMLtoPDF.convert(options)
tinyCoder32 commented 3 years ago

Same here.

stale[bot] commented 2 years ago

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

mihaitreispe commented 2 years ago

I am having the same issue, but only when generating from an iOS device. The contents of the a tag are properly formatted as a hyperlink, but nothing happens when clicking on it

yutasuzuki commented 2 years ago

@mihaitreispe I had a same problem and I tried two.

1. How to write anchor tags

It seems to be checking the href of the anchor tag and the URL of the child text.

<!-- OK -->
<a href="https://example.com">https://example.com</a>
<a href="">https://example.com</a>

<!-- NG -->
<a>https://example.com</a>
<a href="https://example.com">LINK</a>

<!-- Open https://example.com -->
<a href="https://foo.com">https://example.com</a>

2. WebFont

In some cases, characters are garbled when Web Font is used.

My solution

Please adjust the size, etc.

<style>
    .link {
      position: relative;
    }
    .text {
      font-size: 14px;
      color: blue;
      text-decoration: underline;
    }
    .anchor {
      position: absolute;
      top: 0;
      display: block;
      width: 100px;
      height: 20px;
      line-height: 4em;
      font-size: 3px;
      overflow: hidden;
      color: rgba(0, 0, 0, 0);
    }
</style>
<div class="link">
  <a class="anchor" href="">https://example.com</a>
  <span class="text">LINK</span>
</div>

I hope this helps you.

mihaitreispe commented 2 years ago

Awesome @yutasuzuki . It worked