客户端配置指南★ 4.7 推荐评级

怎么在网站里面插入PDF预览效果

博主头像站长评测
发布于 2019/12/18原创独立站体系

有时候搭建网站需要插入一些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 渲染引擎,兼容跨平台双指缩放、翻页控制与高清打印。