2017-02-23 63 views
1

У меня есть веб-страница со столом. Если пользователь входит в систему, они могут нажать на заголовки строк, чтобы войти в страницу редактирования. Чтобы печатная версия выглядела одинаково для входа в систему и не вошла в систему, я использую CSS для стилизации ссылки в виде обычного текста.Как сделать ссылку недоступной при печати в PDF

Проблема заключается в том, что функция Сохранить как PDF в хроме сохраняет ссылки с их href, заставляя их открывать веб-страницу, если она нажата в сохраненном pdf. Есть ли способ удалить этот href во время этой «печати», , за исключением очевидного способа иметь два элемента и отображать только щелчок в @media not print и показывать только номер без клика в @media print?

Я предпочитаю не использовать JavaScript для изменения href во время печати.

+0

Вы можете добавить дополнительные класс к этим ссылкам, а затем используйте стиль «display: none» в вашей таблице стилей печати. – ChelseaStats

+0

@ChelseaStats Я должен осветленные, что ссылка применяется к заголовку для каждой строки (например, 'Item #1 ...') – Nulano

+0

@ChelseaStats Перечитайте это: ... кроме очевидным образом иметь два элементов и показывая только кликабельный в '@media not print' и показывая только не кликабельный в' @media print'? – Nulano

ответ

0

Вы можете использовать атрибут OnClick, чтобы открыть страницу редактирования:

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

стиль его в качестве ссылки, используйте селектор th[onclick] CSS:

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

использовать как этот REMOVE тега привязки и положить DIV ... как

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

    </div> 
+0

Как бы это загрузить определенный сайт для каждой строки? (Мой URL-адрес «? Edit = ID», где ID является идентификатором строки в таблице sql) – Nulano

2

Вы можете использовать pointer-events, смотрите здесь совместимость браузера для этого http://caniuse.com/#search=pointer-events. Он отключит вашу ссылку.

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

Это не имеет для меня никакого эффекта. Ссылка не доступна для кликов в хроме, но после «печати» ее с помощью «Сохранить как PDF» ссылка снова активируется (она даже доступна в окне предварительного просмотра). – Nulano

+0

Попробуйте распечатать этот кодз, нажав кнопку http://codepen.io/TunderScripts/pen/vxYNwE –

+0

Это удаляет ссылку. Однако, если вы измените href на, например, google.com, ссылка больше не удаляется во время печати. – Nulano

Смежные вопросы