如何在打印到PDF时使链接不可点击

我有一个带有表格的网页。如果用户登录，他们可以单击行标题进入编辑页面。为了使印刷版本对于登录用户和未登录用户都是相同的，我使用CSS将链接定义为普通文本。如何在打印到PDF时使链接不可点击

问题是，在Chrome中另存为PDF功能可以保存与他们的href链接，使他们打开一个网页，如果点击保存的PDF文件。有没有什么办法，在这个'打印'，期间删除这个href除了有两个元素的明显方式，并且只显示@media not print中的可点击元素并且只显示@media print中的非可点击元素？

我更喜欢在打印过程中不使用JavaScript来更改href。

来源

2017-02-23 Nulano

你可以添加一个额外的然后在打印样式表上使用'display：none'样式。 – ChelseaStats

@ChelseaStats我应该澄清，该链接适用于每一行的标题（例如'Item #1...'） – Nulano

@ChelseaStats重读这个：...除了明显的方式有两个元素，只显示'@media not print'中可点击的元素，并且只显示'@media print'中不可点击的元素？ – Nulano

可以使用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; 
    } 
}

来源

2017-02-23 10:14:57 Nulano

使用这样的删除锚标记，并把格...像

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

    </div>

来源

2017-02-23 09:50:22

这会如何为每一行加载一个特定的网站？（我的URL是'？edit = ID'，其中ID是sql表中的行的ID） – Nulano

您可以使用pointer-events，查看哪些http://caniuse.com/#search=pointer-events浏览器的兼容性。它会禁用你的链接。

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

来源

2017-02-23 09:57:11

这对我没有任何影响。该链接无法在Chrome中点击，但是通过“另存为PDF”“打印”后，该链接可再次点击（甚至在打印预览窗口中可点击）。 – Nulano

尝试通过单击按钮打印此codepen http://codepen.io/TunderScripts/pen/vxYNwE –

这并没有删除链接。但是，如果您将href更改为例如google.com，链接在打印期间不再被删除。 – Nulano

如何在打印到PDF时使链接不可点击

回答

相关问题