步骤1
选择您想添加到网站上的按钮
步骤2
配置图像设置
页头图片
请选择您希望在打印版页面顶部显示的图片。您可以选择网站图标,系统将使用您网站的favicon。或者,您可以选择上传图片。
在页面上显示图片
请选择是否要在“打印预览”和PDF页面中显示图片。
图片位置
此选项可让您选择在打印版页面上如何排列图片。
步骤3
自定义 CSS (可选)
若要自定义内容的样式,或在打印/PDF 模式下隐藏某些元素,您可以使用自定义 CSS。
使用 CSS 文件
在“自定义 CSS”输入框中输入您的 CSS 文件的 URL,并使用生成的按钮代码。
使用 printfriendly-css 标签
您可以在页面中添加 printfriendly-css 标签,并将 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>