有时候搭建网站需要插入一些PDF文件,希望用户直接在网页上面在线预览PDF内容,而不是通过下载的方式查看。所以我们可以使用下面这两个插件来帮我们实现。
PDF Embedder
将PDF直接嵌入到您的帖子和页面中,具有灵活的宽度和高度。无需第三方服务。与Gutenberg编辑器WordPress兼容
这款插件带有设置功能,可以自己设置宽度等。
RSV PDF Preview
显示任何pdf的样本预览,而无需创建新的pdf文档的简短版本
这款插件不支持中文,使用的话是通过短代码[rsv_pdf_preview url='PDF文件地址']引用。
网站嵌入 PDF 在线预览的常见方案
如果站点需要向客户提供产品说明书、技术白皮书或报价单,相较于强制用户下载本地阅读,在网页内嵌可交互的 PDF 预览窗口能带来更加直观的浏览体验。
两种高效免插件实现方法
方案一:HTML5 原生 iframe 极速嵌入
在古腾堡编辑器中插入一个自定义 HTML 区块,输入如下标准代码:
<iframe
src="/uploads/document.pdf#toolbar=1"
width="100%"
height="600px"
style="border: 1px solid #e2e8f0; border-radius: 12px;">
</iframe>
方案二:基于 Mozilla PDF.js 现代解析库
针对移动端或微信内浏览器环境,推荐引入轻量的 PDF.js 渲染引擎,兼容跨平台双指缩放、翻页控制与高清打印。