我转过几个弯 绕过那个小雨楼
- 拿着蒲扇摆着衣衫渡着紧箍咒
- 不问天涯不停留 喝过几壶酒
- 不过年少白头道义放胸口
- 倘若明天之后 遥看前尘剑封侯
- 似那天上神仙无所求
- 朝朝暮暮君如梦醒十分不为何理由
- 是真是假是惶恐是无休
- 路过这风雨花满楼 片刻都不停留
- 我本这书生进京赶考留下许多愁
- 你问有没有时候 我叹这天道默悠悠
- 能否与我一醉方休
- 又过了几个弯 算尽天量道莫慌
- 踏这田园闻这芳草香
- 跌跌撞撞仗剑天涯折煞不枉无笔良
- 是梦是幻是温柔是家乡
- 路过这风雨花满楼 片刻都不停留
- 我本这书生进京赶考留下许多愁
- 你问有没有时候 我叹这天道默悠悠
- 能否与我一醉方休
- 路过这风雨花满楼 片刻都不停留
- 我本这书生进京赶考留下许多愁
- 你问有没有时候 我叹这天道默悠悠
- 能否与我一醉方休
- 谁能与我一醉方休
网页在线预览pdf文件之PDFObject
木灵鱼儿
305 天前vue 项目实战
258
0
0
pdf.js在了解到这个库的时候还看到了一个叫PDFObject的库，仔细看了下，这个库相对来说太简单了，它只是利用html元素的特性去加载pdf文件，比如<embed>标签、<iframe>标签、<object>标签，所以从移动端角度来说，这个东西并不符合需求，因为手机端暂时还不支持这种。
先看看这三种标签的用法吧！
embed标签
<embed src="pdf文件链接或路径" type="application/pdf" width="100%" height="100%">embed是一个单标签，所以这就导致他无法提供回退方案，当浏览器不支持的时候，它不会又任何提示。
iframe标签
<iframe src="pdf文件链接或路径" width="100%" height="100%">
当前浏览器不支持在线预览，请下载再打开: <a href="pdf文件链接或路径">下载 PDF</a>
</iframe>当浏览器不支持直接打开的时候，就会显示里面的文字提示。
object标签
<object data="pdf文件链接或路径" type="application/pdf" width="100%" height="100%">
当前浏览器不支持在线预览，请下载再打开: <a href="pdf文件链接或路径">下载 PDF</a>
</object>object和iframe一样，内部有回退的方案，几乎所有主流浏览器都拥有部分对 < object > 标签的支持，但相对来说iframe兼容性会更好一些，所以我们设置可以将iframe嵌套在object 里面做一个回退方案，然后在iframe再做一个最终的回退方案。
以上就是三种标签的用法，而PDFObject无非就是利用这些特性而已。
PDFObject官网
方法
PDFObject有一个好处就是他的调用方法很简单，而且支持在渲染的窗口里选中文字，前提是pdf里面的内容是文字而不是图片。
const options = {
pdfOpenParams: {
pagemode: "thumbs",
navpanes: 0,
toolbar: 0,
statusbar: 0,
view: "FitV"
}
};
PDFObject.embed(
this.getFilePath("pdf文件地址"),
"body",
options
);
具体的用法可以直接在官网查看到，而且谷歌浏览器和火狐浏览器差别特别大，在火狐里面功能贼多，而在谷歌里面顶多就是个放大缩小，预览啥的。
虽然pdf.js也是可以在渲染中选中文字，但是要调用一个方法，所以这个可以作为一个简单的备选方案，并且便捷一些。
0
评论(0)