Fluid -3- pdf.js PC,移动端查看 PDF

本文最后更新于:2022年8月10日 上午

hexo 有各种支持pdf的查看方案,但大多不同时支持移动端和PC端,本文记录使用 pdf.js 实现各设备查看 pdf 的方法。

简介

pdf.js 是用于解析和呈现 PDF 的基于 Web 标准平台的通用解决方案,功能强大。

官方网站:https://mozilla.github.io/pdf.js/

下载 pdf.js

  • 官网地址:https://mozilla.github.io/pdf.js/
  • 新版本不支持部分浏览器,为了更好的兼容性,下载旧版本浏览器的文件包
  • 点击 Download 按钮

  • 下载并解压相关内容

修改 viewer.js

直接使用下载的文件会报错

1
Error: file origin does not match viewer's

需要注释掉

  • web/viewer.js 文件中的相应内容:

加入主题

将下载文件夹命名为 pdfjs,拷贝到 themes/fluid/source/js

使用方法

  • 在markdown 文档中使用 <iframe> 控件配合pdf.js 库完成pdf 显示
1
<iframe src='/vvd_js/pdfjs/web/viewer.html?file=<src-to-pdf>' style='width:100%;height:100%'></iframe>

src-to-pdf:为 pdf 文件的链接

style 可以根据实际需求适当调整

示例

参考资料


Fluid -3- pdf.js PC,移动端查看 PDF
https://www.zywvvd.com/notes/hexo/theme/fluid/fluid-pdf/fluid-pdf/
作者
Yiwei Zhang
发布于
2021年8月15日
许可协议