本文介绍在hexo 中添加 pdf 插件的方法。
$ npm install --save hexo-pdf
官网:https://github.com/superalsrk/hexo-pdf
{% pdf <url-to-pdf> %}
所有浏览器都支持 < iframe > 标签,直接将src设置为指定的PDF文件就可以预览了。
此外可以把需要的文本放置在 < iframe > 和 之间,这样就可以应对无法理解 iframe 的浏览器,比如下面的代码可以提供一个PDF的下载链接:
<iframe src="/index.pdf" width="100%" height="100%">
This browser does not support PDFs. Please download the PDF to view it: <a href="/index.pdf">Download PDF</a>
</iframe>
< embed > 标签定义嵌入的内容。
<embed src="/index.pdf" type="application/pdf" width="100%" height="100%">
< object >定义一个嵌入的对象,请使用此元素向页面添加多媒体。此元素允许您规定插入 HTML 文档中的对象的数据和参数,以及可用来显示和操作数据的代码。用于包含对象,比如图像、音频、视频、Java applets、ActiveX、PDF 以及 Flash。几乎所有主流浏览器都拥有部分对 < object > 标签的支持。这个标签在这里的用法和< iframe >很小,也支持回退:
<object data="/index.php" type="application/pdf" width="100%" height="100%">
This browser does not support PDFs. Please download the PDF to view it: <a href="/index.pdf">Download PDF</a>
</object>
<object data="/index.pdf" type="application/pdf" width="100%" height="100%">
<iframe src="/index.pdf" width="100%" height="100%" style="border: none;">
This browser does not support PDFs. Please download the PDF to view it: <a href="/index.pdf">Download PDF</a>
</iframe>
</object>
全平台查看PDF解决方案
使用方法
Download
按钮
建议放在hexo source文件夹并skip-render掉,这样可以主题无关地使用pdf阅读功能
<iframe src='/vvd_js/pdfjs/web/viewer.html?file=<src-to-pdf>' style='width:100%;height:100%'></iframe>
Error: file origin does not match viewer's
web/viewer.js
文件中的相应内容: