• 我转过几个弯 绕过那个小雨楼
  • 拿着蒲扇摆着衣衫渡着紧箍咒
  • 不问天涯不停留 喝过几壶酒
  • 不过年少白头道义放胸口
  • 倘若明天之后 遥看前尘剑封侯
  • 似那天上神仙无所求
  • 朝朝暮暮君如梦醒十分不为何理由
  • 是真是假是惶恐是无休
  • 路过这风雨花满楼 片刻都不停留
  • 我本这书生进京赶考留下许多愁
  • 你问有没有时候 我叹这天道默悠悠
  • 能否与我一醉方休
  • 又过了几个弯 算尽天量道莫慌
  • 踏这田园闻这芳草香
  • 跌跌撞撞仗剑天涯折煞不枉无笔良
  • 是梦是幻是温柔是家乡
  • 路过这风雨花满楼 片刻都不停留
  • 我本这书生进京赶考留下许多愁
  • 你问有没有时候 我叹这天道默悠悠
  • 能否与我一醉方休
  • 路过这风雨花满楼 片刻都不停留
  • 我本这书生进京赶考留下许多愁
  • 你问有没有时候 我叹这天道默悠悠
  • 能否与我一醉方休
  • 谁能与我一醉方休

网页在线预览pdf文件之PDFObject

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官网

官网

github

方法

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
  • 本文分类:vue 项目实战
  • 本文标签:PDFObject
  • 流行热度:已超过 99 人围观了本文
  • 最后更新:2020年04月28日 - 0时08分55秒
  • 发布日期:2020年04月28日 - 0时06分00秒
  • 版权申明:本文系作者@木灵鱼儿原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可,禁止转载。
微信收款码
微信收款码