本文分享markdown的妙用:插入本地文件。
前一篇博客,我插入了一个pdf文件。
实际上是这样写的:
还能这样写(使用html,并加入图标):
1 | <a id="download" href="/contentimg/18/Office-2019.pdf"><i class="fa fa-download"></i><span> Download PDF </span> |
这里也放一下pdf转html的一个网站吧,速度蛮快的:
转化完下载下来是一个压缩包,解压放到工程中,然后到主配置文件修改:
提醒hexo忽略编译该文件夹。然后清理整个工程:hexo clean。再生成和发布,就可以使用了。
优化版
目前这个在移动端无法适配大小。而且如果每个pdf都拿去转html,效率一般般。如果只需要完成电脑端的查看,可以直接
1 | <p><div style="width:100%; height:950px;border:none;text-align:center"><iframe allowtransparency="yes" frameborder="0" width="100%" height="800" src="filepath.pdf"/></div></p> |
这种做法,实际hexo有个插件已经集成自动转化这种代码。但是不推荐这种做法!理由是iframe+pdf原文件,在手机端打开,不是提示下载,就是提示不支持。
但是日常生活中,我们看到那些做得好的网站,是能在线浏览pdf的?都是后台转html?不是,这里有个开源插件:pdf.js下载 源码120+m,有兴趣的前端工程师可以去github下载来看。这个链接是已经build的。拿到手后,修改一些参数后就可以使用了。
要改的地方只有一个:找到示例中的pdf文件,删掉,同时在viewer.js脚本中找到这个文件的指向,删掉。
然后到配置文件设置不编译这个目录,重新生成,就可以启用了。使用方法是在src中,先定位到该viewer.html,然后传你要显示的pdf给它。这样在电脑端或者移动端,都是可以实时预览,而且下次引用也方便。只需要指定新的pdf目录即可。