2022 年 10 月 27 日更新内容
最近发现维基百科的词条页面加多了一个 PDF 文件下载按钮,无独有偶,在 WikiHow 的页面也发现 PDF 文件下载按钮,因为平常浏览这两个网站的次数并不频繁,所以不清楚具体是什么时候伊始有的。
wikipedia dl as pdf flie
由于个人对 PDF 文件也是有一定需求,所以便有了自己写一个像 Wikipedia 这样的一个固定位置 PDF 下载按钮的想法。
手动写一个 PDF icon
首先使用 CSS 写一个按钮样式,样式可以在网上搜索,或者自己手动写一个。如果你是 typecho 博客,可以将按钮 CSS 样式的代码放在 post.php(即文章页面),具体的位置看个人需求调动,建议放在显眼的位置。
因为我个人站点本身是引用 fontawesome的矢量图,所以样式直接调用 fas fa-file-pdf 元素,样式如下:
<i class="fas fa-file-pdf">
<a>PDF</a>
</i>
此为引用矢量图生成的 PDF 按钮
但如果你是没有引用 fontawesome,或者想单纯用纯 css 画一个按钮的,可以使用 pdf-btn 来自定义样式。
在 post.php(即文章页面)所需位置插入代码如下:
<button class="pdf-btn">PDF</button>
css 样式参考:
.pdf-btn {
background-color: #060606;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
border-radius: 50px;
}
样式如下:
此为手动写的 PDF 按钮
如何最优解获取 PDF 文件
一开始的思路是通过 Mozilla 开发的 PDF.js 对页面自动生成 PDF,但是经过测试,生成的 PDF 文件排版不是自己想要的效果,于是改成外链形式的下载。
但如何让整个过程最便捷成了一个新的问题,后来在网上搜索的时候留意到其它博客使用自定义字段来提供文章的附件下载功能,这是 Typecho 官方早前就有的一个功能,通过自定义字段可以来调用某些功能,如自定义文章的描述和关键词,便联想到 JavaScript 函数 + 自定义字段来调用 PDF 下载链接。
大致思路如下:
点击按钮 → 触发 onclick 对象 → 返回 onclick 事件 → 触发 Typecho 自定义字段 → 返回下载链接
随着这个思路,尝试将两者结合:
onclick 事件对象代码,和上方按钮代码放在一起。
<a href="javascript:;" onclick="pdf()"></a>
完整按钮代码如下:
样式一代码:
<i class="fas fa-file-pdf">
<a href="javascript:;" onclick="pdf()">PDF</a>
</i>
样式二代码:
<a href="javascript:;" onclick="pdf()" class="pdf-btn">PDF</a>
接下来是 JavaScript 函数参数:
<script>
function pdf(){
//添加注册事件
}
</script>
typecho 自定义字段代码:
<?php
$fieldValue = $this->fields->pdf;
$this->fields->pdf();
?>;
将自定义字段代码和按钮 JavaScript 函数集合,放在 footer.php 或者 post.php。
<script>
function pdf(){
window.location.href="<?php
$this->fields->pdf();
?>;"
}
</script>
这样以来,只需要在编辑文章的界面,在自定义字段添加 PDF 载链接即可形成一个完整的事件,如果没有放链接无法形成完整事件。
自定义字段需要与自己设置的保持一致,右边内容填入 PDF 文件下载链接即可
测试结果如下:
点击按钮后自动跳转至浏览器浏览 PDF 文件页面
测试效果到达预期效果,将自定义字段做为固定模板加入到后台编辑面板 functions.php
function themeFields($layout) {
$pdf = new Typecho_Widget_Helper_Form_Element_Text('pdf', NULL, NULL, _t('PDF 文件下载链接'), _t('支持外链'));
$pdf->input->setAttribute('class', 'w-100');
$layout->addItem($pdf);
}
pdf 自定义字段添加设置面板函数
到了这里,又出现了一个新的问题,如果是后台直接将 pdf 文件上传到附件的,对读者而言并不友好,因为 Typecho 博客上传文件后默认使用数字命名方式,下载的时候就会出现文件名纯数字(如上图),保存到本地根本不知道是什么内容,所以需要修改 Typecho 博客主文件的代码,由于涉及到修改主 typecho 主文件,所以这里不提供,建议直接放外链(如 OD 网盘共享文件)。
修改主文件代码后最终的实现效果如下:
经过调整后的效果
如何制作 PDF 文件
Typora 官网界面
我平常文章的起稿就是用 Typora 写的,这个软件强大到可以导出任何格式的文件,其中就包含 PDF 文件,相较于 md 文件,PDF 也可以更好的保护图片,同时对普通群体较为友好,Desktop 用户无论是使用哪款浏览器都可以打开。此外,PDF 文件支持外链、锚点等功能,作为离线文件是首选格式。