PrintFriendly

一個讀者真的會使用的列印、PDF 及電子郵件按鈕。

請在下方進行自訂,將程式碼片段貼到您的網站上,就完成了。

步驟 1

請選擇您想新增至網站的按鈕

步驟 2

設定影像設定

頁首圖片

請選擇您希望在「適合列印」頁面頂端顯示的圖片。您可以選擇網站圖示,系統將使用您網站的 favicon。或者,您也可以選擇上傳圖片。

在您的網頁上顯示圖片

請選擇是否要在「適合列印」頁面和 PDF 頁面中顯示圖片。

圖片位置

此選項可讓您選擇在「適合列印的頁面」上如何排列圖片。

步驟 3

自訂 CSS (可選)

若要自訂內容的樣式,或在列印/PDF 模式下隱藏元素,您可以使用自訂 CSS。

使用 CSS 檔案

請在「自訂 CSS」輸入欄位中輸入您的 CSS 檔案網址,並使用生成的按鈕代碼。

使用 printfriendly-css 標籤

您可以將包含 CSS 樣式及按鈕程式碼的 `printfriendly-css` 標籤加入頁面中。

<printfriendly-css style="display: none;">
  h4 {
    font-size: 24px !important;
  }
</printfriendly-css>
自訂範例

:將 CSS 樣式範圍限定為 #printfriendly ,並加入 !important 以覆寫預設樣式

自訂列印/PDF 的邊距

@media print {
  @page {
    margin: 5mm !important;
  }
}

隱藏網址

#printfriendly #pf-src {
  display: none !important;
}

隱藏標題

#printfriendly #pf-title {
  display: none !important;
}

使用 Google 字型

/* Use the Inter Font */
@import url('https://fonts.googleapis.com/css2?family=Inter&display=swap');

#printfriendly {
  font-family: 'Inter', sans-serif !important;
}

橫向列印/PDF

@media print {
  @page {
    size: landscape !important;
  }
}

步驟 4

設定 PrintFriendly 功能

允許透過電子郵件分享頁面

此選項會在 PrintFriendly 視窗中顯示「電子郵件」按鈕。請選擇是否允許使用者將您的頁面網址透過電子郵件傳送給其他使用者。

允許下載 PDF

此選項會在 PrintFriendly 視窗中新增一個 PDF 按鈕。請選擇是否允許使用者將您的「適合列印」頁面匯出為 PDF 格式。

允許使用者建立網頁的列印版本。

此選項會在 PrintFriendly 視窗中新增一個「列印」按鈕。請選擇是否要讓使用者建立網頁的列印友善版本。

允許使用者從您的「適合列印」頁面中刪除內容。

此選項可讓使用者在列印或將頁面匯出為 PDF 之前,從您的「適合列印」頁面中刪除內容。使用者無法從您網站的實際頁面中刪除內容。

Pro 專屬功能

將圖片編碼為 Base64。

若您的網站未對外公開,或您的服務供應商阻擋來自第三方(例如 Zendesk)的圖片請求,或是 PDF 檔案中未包含圖片,請啟用此功能

包含不可見的內容

預設情況下,PrintFriendly Pro 僅會顯示頁面上的可見內容。若您希望 PrintFriendly 顯示隱藏內容,請啟用此功能。(例如:隱藏分頁中的內容)

步驟 5

請將此程式碼插入您希望顯示 PrintFriendly 列印按鈕的位置。

<printfriendly-options style="display:none;" data-content-features="disableClickToDel=0;hideImages=0;imageDisplayStyle=block;disablePDF=0;disableEmail=0;disablePrint=0;encodeImages=0;showHiddenContent=0;"></printfriendly-options><script>var pfBtVersion='3';(function(){var js,pf;pf=document.createElement('script');pf.type='text/javascript';pf.src='//www.printfriendly.com/printfriendly.js';document.getElementsByTagName('head')[0].appendChild(pf);})();</script><a href="https://www.printfriendly.com" style="color:#6D9F00;text-decoration:none;" class="printfriendly" onclick="window.print();return false;" title="PrintFriendly and PDF"><img style="border:none;-webkit-box-shadow:none;box-shadow:none;" src="//cdn.printfriendly.com/buttons/new/three-icons-light.svg" alt="PrintFriendly and PDF"/></a>

取得 PrintFriendly Pro

PrintFriendly Pro 符合 GDPR 規範,並具備眾多實用功能。立即為您的網域購買此服務。

取得「列印按鈕 Pro」