vue2使用PDF.js来展示PDF文件

1.安装pdfjs-dist库

1.1 npm安装

npm install pdfjs-dist@2.10.377

1.2 标签引入

<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.5.207/pdf.min.js"></script>

2.导入pdfjs库

2.1 npm安装引入

import * as pdfJS from 'pdfjs-dist';
import pdfjsWorker from 'pdfjs-dist/build/pdf.worker.entry'
pdfJS.GlobalWorkerOptions.workerSrc = pdfjsWorker;

2.2标签安装引入

const pdfJS = window["pdfjs-dist/build/pdf"]

3.创建一个Vue组件并将PDF文件加载到页面

方式1：通过<canvas>标签展示内容

<template>
  <div >
    <canvas ref="canvas" v-for="(page, index) in totalPages" :key="index"  ></canvas>
  </div>
</template>

<script>
import * as pdfJS from 'pdfjs-dist';
import pdfjsWorker from 'pdfjs-dist/build/pdf.worker.entry'
pdfJS.GlobalWorkerOptions.workerSrc = pdfjsWorker;


import hp from '../util/http'

export default {
  name: "showPdf",
  data() {
    return {
      totalPages: [],
    };
  },

  mounted() {
    this.initData()
  },
  methods: {
    async initData() {
      pdfJS.getDocument(url).promise.then(pdf => {
        this.totalPages = pdf._pdfInfo.numPages
        for (let pageIndex = 1; pageIndex <= this.totalPages; pageIndex++) {
          pdf.getPage(pageIndex).then(page => {
            this.renderPDFPage(page, pageIndex)
          })
        }
      })
    },
    renderPDFPage(page, pageIndex) {
      const canvas = this.$refs.canvas[pageIndex - 1]
      const dpiRatio = window.devicePixelRatio || 1
      const viewportOptions = { scale: 1, useCurrentScale: false, dontFlip: false, pixelRatio: dpiRatio, isMobile: true }
      const viewport = page.getViewport(viewportOptions)
      canvas.height = viewport.height
      canvas.width = viewport.width

      const renderContext = {
        canvasContext: canvas.getContext('2d'),
        viewport: viewport
      }
      page.render(renderContext)
    }
  }
}
</script>

<style scoped>
canvas {
  max-width: 100%;
}
</style>

在上述代码中，getViewport()方法的第二个参数现在是一个对象，该对象具有以下属性：

• scale: 1：确保页面不被缩放。
• useCurrentScale: false：不使用当前缩放比例。
• dontFlip: true：不翻转（也不旋转）页面。
• pixelRatio: dpiRatio：使用设备像素密度来提高分辨率。

以上属性的组合应该就可以让自适应模式生效并且适应窗口大小和设备像素密度。

方式2：通过<img>标签展示内容

<template>
  <div >
    <template v-for="item in imgArray">
      <img style="width: 100%; height: 100%;" :src="item" alt="">
    </template>
  </div>
</template>

<script>

import * as pdfJS from 'pdfjs-dist';
import pdfjsWorker from 'pdfjs-dist/build/pdf.worker.entry'
pdfJS.GlobalWorkerOptions.workerSrc = pdfjsWorker;


import hp from '../util/http'

export default {
  name: "showPdf",
  data() {
    return {
      totalPages: [],
      imgArray: []
    };
  },

  mounted() {
    this.initData()
  },
  methods: {
    async initData() {
      pdfJS.getDocument(url).promise.then(function (pdf) {
        const pageNum = pdf.numPages;
        for (let i = 1; i <= pageNum; i++) {
          pdf.getPage(i).then((page) => {
            //创建canvas，并且返回相关数据
            const canvasObj = this_.pageToCanvasObj(page);
            //<canvas>渲染
            page.render(canvasObj.renderContext).promise.then(() => {
              //通过canvas对象的toDataURL得到图片链接
              const imgUrl = canvasObj.canvas.toDataURL();
              this_.imgArray.push(imgUrl)
              this_.isLoaded = true
            })
          })
        }
      });

    },
    pageToCanvasObj(page) {
      const viewport = page.getViewport({scale: 1});
      const canvas = document.createElement('canvas');
      const context = canvas.getContext('2d');
      canvas.height = viewport.height;
      canvas.width = viewport.width;
      canvas.style.width = "100%";
      canvas.style.height = "100%";
      return {
        canvas, renderContext: {canvasContext: context, viewport}
      }
    },
  }

}
</script>