手机端pdf预览

项目需求: 实现h5页面中预览pdf,主要是微信中。HTML iframe 元素用在pc端还行,移动端不兼容,好多浏览器都打不开。在网上各种找,由于项目是用vue写的,更偏向于vue。找到了一下三种解决方法:

一、pdf.js
  • 下载地址
  • github
  • 在线演示地址

PDF.js是一个使用HTML5构建的可移植文档格式(PDF)查看器。
PDF.js由社区驱动,并由Mozilla Labs提供支持。我们的目标是创建一个通用的,基于Web标准的平台,用于解析和呈现PDF。

使用方法

先将代码克隆到本地

     git clone https://github.com/mozilla/pdf.js.git

目录结构如下


pdf.js目录结构

打开web目录下面的viewer.html可以看到默认打开的pdf。


image.png

想预览自己的pdf可以在url后面传参数file="xx",xx可以是pdf文件流可以是url地址。url地址必选是跨域可以访问的。还必须注掉以下代码

      if (origin !== viewerOrigin && protocol !== 'blob:') {
      if (protocol !== 'blob:') {
        throw new Error('file origin does not match viewer\'s');
      }

不注掉会访问允许跨域和不允许跨域的资源会报如下错误:


image.png

注掉访问不允许跨域资源的会报如下错误:


image.png

注掉访问允许跨域资源正常:
image.png

你可能感兴趣的:(手机端pdf预览)