如何在打印到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時使鏈接不可點擊

回答

相關問題