移动端网页PDF预览

接到一个移动端网页pdf预览的需求，首先想到的方案是利用iframe进行显示。 后端响应头设置

Content-Disposition: inline

Content-Disposition

一般有以下几种情况

// inline 默认值，表示回复中的消息体会以页面的一部分或者整个页面的形式展示
Content-Disposition: inline   
// attachment 意味着消息体应该被下载到本地；大多数浏览器会呈现一个“保存为”的对话框
Content-Disposition: attachment
// filename 下载后的文件名
Content-Disposition: attachment; filename="filename.jpg"

按照正常思维，设置之后，应该在iframe里面展示pdf内容。 在PC端模拟器测试时，一切与预期一致。但是到了移动端浏览器，就不同了。

iphone手机 自带的safari、微信、企业微信自带的浏览器都与预期一致。 Android手机(huawei mate9)，在企业微信自带浏览器，是新窗口打开了pdf，在微信自带浏览器和手机自带浏览器，都是提示下载。

效果与需求不一致

pdf.js

简介

pdfjs 在npm仓库提供了一个叫pdfjs-dist包。

引入pfdjs

const PDFJS = require("@/pdfjs-dist");
const workerSrc = require("@/pdfjs-dist/es5/build/pdf.worker.entry.js");
PDFJS.GlobalWorkerOptions.workerSrc = workerSrc;

下载pdf

const CMAP_URL = "https://unpkg.com/pdfjs-dist@2.5.207/cmaps/";
const loadingTask: any = PDFJS.getDocument({
    url: this.pdfUrl,
    cMapUrl: CMAP_URL,
    cMapPacked: true,
    withCredentials: true,
});
loadingTask.promise
    .then((pdfDoc_) => {
        // 拿到pdf可以存起来，用于接下来的展示
    })
    .catch((error: any) => {

    });

获取某一页的内容

this.pdfDoc
    .getPage(num)
    .then(
      (page: any) => {
        const viewport = page.getViewport({ scale: 1 });

        canvas.height = viewport.height;
        canvas.width = viewport.width;
        canvas.style.width = "100%";
        
        const renderContext = {
          canvasContext,
          viewport: viewport,
        };
        page.render(renderContext);
      }
    )
    .catch((e: any) => {
      console.info(e);
    });

问题

• pdf展示模糊

  在高分辨率屏幕上，pdf可能会显示的不太清晰。 这是canvas 属性上设置的width/height是指物理像素，如果devicePixelRatio的值为2，那么意味着一个css像素相当于2个物理像素。按照上面的设置，canvas的css宽度值与canvas的物理像素值一致，将会导致canvas画布被放大，展示变得模糊。 于是，根据屏幕的像素比，设置scale的值，使得在不同分辨率的设备，都能得到清晰的体验效果。

• pdf部分字体不显示

引入字体库 const CMAP_URL = "https://unpkg.com/pdfjs-dist@2.5.207/cmaps/"; // 字体库地址 const loadingTask: any = PDFJS.getDocument({ url: this.pdfUrl, cMapUrl: CMAP_URL, cMapPacked: true, withCredentials: true, });

• 签章不显示

手动修改源码 因为库的作者处于安全考虑，如果是Sig类型，会隐藏，所以，也没法指望作者放开了。只能自己手动。 pdf.worker.js

pdf下载

不同浏览器，依然表现不太一致

在微信里

先展示一个诱导下载QQ浏览器的页面，需要选择【其他方式下载】，多了一步，还好，能实现下载

在企业微信里

下载后直接预览

在自带的浏览器里