移动端显示h5我目前已经尝试了3种方法：

我使用的是vue的2.X版本 后端返回一个pdf的链接 
  
  
  
  
  
 ，然后前端直接使用location.href = ‘http://www.XXX.com/test.pdf’
  
  
  
  
  
  ，这种形式苹果手机应该是没问题的
 


 


 


 


 


 

，但是安卓手机默认会触发下载 
 
 
 
 
 
，所以不推荐 
  
  
  
  
  
 。 使用pdfjs
   
   
   
   
   
   ，这是pdfjs的下载地址
 

 

 

 

 

 
，点击下载之后会下载一个压缩包 

 

 

 

 

 

，里面包含build            ，web文件夹和LICENSE文件

 
 

 
 

 
 

 
 

 
 

 
 ，把他们解压之后放在static目录下面











，这里给一个目录结构（我的项目是vue2.X项目）： | src | static | pdfjs | build | web

然后在使用的时候是这样的

<iframe ref="iframeRef" frameborder="0" width="100%" :src="/static/pdfView/web/viewer.html?file=XXX"/>

前面的这个/static/pdfView/web/viewer.html是你的静态资源路径                  ，例如你的网页地址是http://www.XXX.com
 
 
 
 
 
 
 
 
 
 
 
 ，那么就是http://www.XXX.com/static/pdfView/web/viewer.html

















，至于这个viewer.html是什么            ，他是pdfjs提供的一个渲染pdf的入口
  
 
  
 
  
 
  
 
  
 
  
 ，也就是通过iframe内嵌viewer.html











，然后通过file字段告诉viewer.html一些细节
  
  
  
  
  
  。file可以是http://www.XXX.com/test.pdf这种.pdf的形式 
  
  
  
  
  
 ，也可以是http://www.XXX.com/getPdfBlob?pdfName=123_指南
  
  
  
  
  
  ，这种blob二进制流形式
 


 


 


 


 


 

。

但是经过测试
 


 


 


 


 


 

，我发现vivo的部分手机和iponeX无法正常显示 使用pdfjs-dist （这个是最终方案） 
 
 
 
 
 
，这里需要注意两个细节：

第一个是pdfjs-dist下载需要下载2.0.943版本

npm install --save pdfjs-dist@2.0.943

第二个是导入的时候

const pdfJS = require("pdfjs-dist"); pdfJS.GlobalWorkerOptions.workerSrc = require("pdfjs-dist/build/pdf.worker.entry");

尤其是一定要配置pdfJS.GlobalWorkerOptions.workerSrc
   
   
   
   
   
   ，pdfjs-dist里面需要引入pdf.work.js
 

 

 

 

 

 
，但是静态资源会被重定向到index.html 

 

 

 

 

 

，所以一定要配置pdfJS.GlobalWorkerOptions.workerSrc 
 
 
 
 
 
。

基本起步就是这些            ，我把我的一些代码粘贴到这里
   
   
   
   
   
   。我这里获取的pdf是二进制流的形式：

<template> <div class="canvas-container"> <canvas class="pdf-container" v-for="page in numPages" :key="page" :ref="myCanvas_ + page"> </canvas> </div> </template> <script> const pdfJS = require("pdfjs-dist"); import { getPDFBlob } from "@/api" pdfJS.GlobalWorkerOptions.workerSrc = require("pdfjs-dist/build/pdf.worker.entry"); export default { created() { getPDFBlob("http://www.XXX.com/getPdfBlob?pdfName=123_指南") .then((res) => { let fileURL = URL.createObjectURL(res.data) this.renderPage(fileURL); }) .catch((error) => { console.log("error", error); }); }, data() { return { numPages: 0 } }, methods: { renderPage(pdfUrl) { let pdfData = pdfJS.getDocument(pdfUrl); pdfData.promise.then((pdf) => { this.numPages = pdf.numPages for (let i = 1; i <= this.numPages; i++) { pdf.getPage(i).then((page) => { let canvas = this.$refs[myCanvas_ + i][0]; let viewport = page.getViewport(3); canvas.height = viewport.height; canvas.width = viewport.width; let ctx = canvas.getContext("2d"); let renderContext = { canvasContext: ctx, viewport: viewport, }; page.render(renderContext) }); } }); }, } }; </script> <style scoped> .canvas-container { width: 100%; overflow: hidden; } .pdf-container { width: 100%; } </style>

这里有两个需要注意的：

第一个是import { getPDFBlob } from “@/api 
  
  
  
  
  
 ”里面的getPDFBlob 是一个方法

 
 

 
 

 
 

 
 

 
 

 
 ，他会拉取一个pdf的blob流
 

 

 

 

 

 
。

第二个是let viewport = page.getViewport(3);可以调整canvas的清晰度











，如果感觉canvas显示的pdf模糊                  ，可以尝试增大 page.getViewpor入参的数值 

 

 

 

 

 

。

但是这里还是要说一句
 
 
 
 
 
 
 
 
 
 
 
 ，pdf虽然正常显示了

















，但是交互不是太好            ，因为不支持双手捏合方法缩小
  
 
  
 
  
 
  
 
  
 
  
 ，不支持双击放大缩小（当然你也可以直接开启css的touch-action属性）            。如果支持











，还需要监听双击和双指操作事件

后续

在我使用pdfjs-dist时 
  
  
  
  
  
 ，也就是我说的第三种方案的时候
  
  
  
  
  
  ，我发现部分pdf出现了显示不全的问题
 


 


 


 


 


 

，打冷眼看以为是乱码 
 
 
 
 
 
，放大仔细一看其实是大部分文字没显示出来
   
   
   
   
   
   ，导致零零散散的文字看起来像乱码

 
 

 
 

 
 

 
 

 
 

 
 。并且后台有警告（警告大概意思是字体包没有提供）











。

Warning: Error during font loading: The CMap “baseUrl
  
  
  
  
  
  ” parameter must be specified, ensure that the “cMapUrl
 


 


 


 


 


 

” and “cMapPacked 
 
 
 
 
 
” API parameters are provided.

我在这篇文章中获得了启发
 

 

 

 

 

 
，我简单介绍一下我的思路                  。解决步骤：

如果找不到字体包就引入线上的 线上字体包的地址是 https://cdn.jsdelivr.net/npm/pdfjs-dist@2.2.228/cmaps/

首先这个逻辑需要在源码里面修改 

 

 

 

 

 

，找到目标目录地址node_modules > pdfjs-dist>build>pdf.js

图片中画红框的内容是需要加的内容
 
 
 
 
 
 
 
 
 
 
 
 。我在下面给出代码的上下文            ，方便搜索和复制

















。

params.rangeChunkSize = params.rangeChunkSize || DEFAULT_RANGE_CHUNK_SIZE; params.CMapReaderFactory = params.CMapReaderFactory || _dom_utils.DOMCMapReaderFactory; params.ignoreErrors = params.stopAtErrors !== true; params.pdfBug = params.pdfBug === true; params.cMapPacked = true params.cMapUrl = https://cdn.jsdelivr.net/npm/pdfjs-dist@2.2.228/cmaps/ var NativeImageDecoderValues = Object.values(_util.NativeImageDecoding);

改完之后就可以正确显示文字了

在这里大家可能看到引入的链接是https://cdn.jsdelivr.net/npm/pdfjs-dist@2.2.228/cmaps/

 
 

 
 

 
 

 
 

 
 

 
 ，通过这个链接感觉好像把pdfjs-dist升级到2.2.228版本就可以了？于是我删除了之前的包然后安装

npm install pdfjs-dist@2.2.228 -S

发现不行











，还是会缺文字            。