6

防止 Edge/Chrome 在頁籤開啟 PDF

 2 years ago
source link: https://blog.darkthread.net/blog/prevent-open-pdf-in-tab/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

防止 Edge/Chrome 在頁籤開啟 PDF-黑暗執行緒

IE 時代即將劃上句點，客戶端近期已開始改用 Edge，甚至連 PDF 也改為預設用 Edge 開啟 (註：依之前的經驗，某些 PDF 文件用 Edge/Chrome 開啟會有字型問題，有時仍得依賴 Acrobat Reader)。

IE Only 網頁經過拉皮翻修，多能順利在 Edge 檢視，但過程難免踩到小石頭，例如今天要說的 PDF 開啟問題。

有段 IE 時代啟用的附檔下載寫法 <a href="url_to_file" target="_blank">附檔下載</a>，一用十幾年，到了 Chrome/Edge，瀏覽器已內建 PDF 檢視器，原本下載 PDF 再開啟的行為變成直接在頁籤顯示，但基本上也還能用。

Fig1_637940967583815076.gif

不過，當新頁籤開啟 PDF 的行為遇上用 window.open 模擬 showModalDialog開啟頁面，操作動線會變得很亂，例如下面的展示：

Fig2_637940970126417582.gif

從 window.open() 開啟的視窗下載 PDF，焦點會跳回底層的母網頁另開頁籤顯示 PDF，連結所在視窗被遮住，得切回母網頁點一下才能把子視窗叫回來，操作動線讓人暈頭轉向。

想了一下，決定讓附件檔下載回歸原本「一律下載檔案再開啟」的行為，如要提供線上檢視，再另設按鈕處理，維持操作介面的一致性。而要做到這點，回歸標準 HTML 語法，改寫成 <a href="url_to_file" download>附檔下載</a>，移掉 target，加上 download 即可。

Fig3_637940967586454491.gif


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK