手机端pdf预览

项目需求: 实现h5页面中预览pdf，主要是微信中。HTML <embed>、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