在 Vue / Html 中 展示 PDF

PDF 文件/ base64 形式的 PDF 数据 / PDF URI ，可以通过 embed, iframe, object 标签展示：

<embed
    src="https://www.irs.gov/pub/irs-pdf/f1040es.pdf"
    type="application/pdf"
    frameBorder="0"
    scrolling="auto"
    height="100%"
    width="100%"
></embed>

<iframe
    src="https://www.irs.gov/pub/irs-pdf/f1040es.pdf"
    frameBorder="0"
    scrolling="auto"
    height="100%"
    width="100%"
></iframe>


<object data="https://www.irs.gov/pub/irs-pdf/f1040es.pdf" type="application/pdf" width="300" height="200">
<a href="https://www.irs.gov/pub/irs-pdf/f1040es.pdf">test.pdf</a>
</object>

但这几种方法都存在兼容性问题，要么在移动浏览器无法展示，要么在 Chrome 无法展示。

更通用的方法是使用 pdfjs
GitHub 地址：

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

官网教程：

https://mozilla.github.io/pdf.js/examples/

1. 引入/安装 pdfjs
   1. npm 方式

npm install pdfjs

在 src/html/index.js 中引入

import pdfjs from 'pdfjs'
Vue.use(pdfjs)

    2. 在 index.html 中引入 

<script src="//mozilla.github.io/pdf.js/build/pdf.js"></script>
<script src="//mozilla.github.io/pdf.js/build/pdf.worker.js"></script>

2. 在 Vue 中使用 pdfjs

template 部分：

<canvas v-for="(pageNum) in numPages" 
        :key="pageNum + '' + (new Date().getTime())" 
        :id="'pdf-canvas' + pageNum"></canvas>

由于 pdf 可能有多页，此处用多个 canvas 标签，一个 canvas 标签只绘制一页

data 部分：

data() {
  return {
    numPages: [],
  }
}

method 部分：

showPdf(base64) {
  // 将传入的 base64 PDF 数据解码
  let pdfData = atob(base64);
  pdfjsLib.GlobalWorkerOptions.workerSrc = 
    "//mozilla.github.io/pdf.js/build/pdf.worker.js";
  /**
  另外如果 pdf 是 url 而不是 base64 格式，可用 
  let loadingTask = pdfjsLib.getDocument(url) 得到 loadingTask
  */
  let loadingTask = pdfjsLib.getDocument({data: pdfData});
  let that = this;
  loadingTask.promise.then(function(pdf) {
    // numPages 仅用于生成多个 canvas
    that.numPages = [];
    // pdf.numPages 可得到该 PDF 文件的总页数
    for (let i = 0; i < pdf.numPages; i++) {
      that.numPages.push(i + 1);
      that.renderPdf(pdf, i + 1);
    }
  }, function (reason) {
    console.error(reason);
  });
},
  
/**
绘制 PDF 的某一页
*/
renderPdf(pdf, num) {
  pdf.getPage(num).then(function(page) {
    // 绘制时，PDF 的缩放倍数
    var scale = 2.5;

    var viewport = page.getViewport({scale: scale});
    var canvas = document.getElementById('pdf-canvas' + num);
    var context = canvas.getContext('2d');
    canvas.height = viewport.height;
    canvas.width = viewport.width;


    var renderContext = {
      canvasContext: context,
      viewport: viewport
    };
    var renderTask = page.render(renderContext);
    renderTask.promise.then(function () {
    });
  });
},

3. 原生 Html 中展示 PDF

https://github.com/paichien/paichien-blog/blob/f9f4e36415160e73215d716cfaefd32bea59e07c/how to show PDF on Vue or html page/showPDF.html

以上文件能够直接运行，可以直观地感受一下 pdfjs 的用法。