CODEWITHSUNDEEP
htmlcss
Nulano
Nulano

Reputation: 1333

How to make link not clickable when printing to PDF

I have a webpage with a table. If a user logs in, they can click on the row headers to enter the edit page. To make the printed version look the same for both logged in and not logged in users, I use CSS to style the link as regular text.

The problem is, that the Save as PDF feature in chrome saves the links with their href, making them open a webpage if clicked on in the saved pdf. Is there any way, to remove this href during this 'print', other than the obvious way of having two elements and showing only the clickable one in @media not print and showing only the non clickable one in @media print?

I prefer not using JavaScript to change the href during printing.

Upvotes: 2

Views: 3559

Answers (3)

Nulano
Nulano

Reputation: 1333

You can use the onclick attribute to open the edit page:

<th onclick="location.href='?edit=ID'">Item #1</th>

To style it as a link, use the th[onclick] CSS selector:

@media not print {
    th[onclick], td[onclick] {
        color: #00e;
        text-decoration: underline;
        cursor: pointer;
    }
}

Upvotes: 0

Dinca Adrian
Dinca Adrian

Reputation: 1230

You can use pointer-events, see here the browser compatibility for that http://caniuse.com/#search=pointer-events . It will disable your link.

@media print {
  a {
    pointer-events: none;
    color: #000;
    text-decoration: none;
  }
}

Upvotes: 2

user7584647
user7584647

Reputation:

use like this remove anchor tag and put div...like

 <style>
   #d:active {
    load-url: (http://google.com/
}
    </style>
    <div class="click" id="d" >

    </div>

Upvotes: 0

Related Questions