vue项目实现PDF加载预览功能

七娃博客 2022-11-24 108人阅读

最近遇到这样一个需求，前端vue项目实现pdf文件预览功能，由于之前用的pdf.js (官方地址：http://mozilla.github.io/pdf.js/) 采用原始的script src引用的方案，与现在整体vue项目不符合环境要求。

<script src="static/js/pdf.js" ></script>

然后，从网上找到了pdf.js的npm版：pdfjs-list (https://www.npmjs.com/package/pdfjs-dist?activeTab=versions)

vue项目实现PDF加载预览功能-QUI-Notes

插件安装

安装

npm i pdfjs-dist

功能实现

使用的话，不建议全局引用，那样会报错，建议在组件这样用，使用require引入：

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

html如下：

<div   class="wrapper"  id="pdf-container" style="width: 100%; height: 100%" ></div>

vue如下：

export default {
  name: "HelloWorld",
  data() {
    return {
      pdfSrc: "https://course.51qux.com/wp-content/uploads/2021/05/jQuery基础教程第四版.pdf", // pdf路径
    };
  },
  mounted() {
    this.SetIFramePage(this.pdfSrc); // 加载pdf

  },
  methods: {
    createPdfContainer(id, className) {
      let pdfContainer = document.getElementById("pdf-container");
      let canvasNew = document.createElement("canvas");
      canvasNew.id = id;
      canvasNew.className = className;
      pdfContainer.appendChild(canvasNew);
    },
    // 渲染pdf
    renderPDF(pdf, i, id) {
      let that = this;
      pdf.getPage(i).then(function (page) {
          let scale = that.getPDFScale();
          let viewport = page.getViewport(scale);
          let canvas = document.getElementById(id);
          let context = canvas.getContext("2d");
          canvas.height = viewport.height;
          canvas.width = viewport.width;
          page.render({
            canvasContext: context,
            viewport: viewport,
          });
        })
    },
    // 创建和pdf页数等同的canvas数
    createSeriesCanvas(num, template) {
      let id = "";
      for (var j = 1; j <= num; j++) {
        id = template + j;
        this.createPdfContainer(id, "pdfClass");
      }
    },
    // 读取pdf文件，并加载到页面中
    SetIFramePage(fileURL) {
      let that = this;
      PDFJS.getDocument(fileURL).then(function (pdf) {
        //用 promise 获取页面
        let id = "";
        let idTemplate = "cw-pdf-";
        let pageNum = pdf.numPages;
        that.createSeriesCanvas(pageNum, idTemplate);
        for (var i = 1; i <= pageNum; i++) {
          id = idTemplate + i;
          that.renderPDF(pdf, i, id);
        }
      });
    },
    //根据当前分辨率返回合适的渲染文档的scale
    getPDFScale() {
      let scale = 1.0;
      let docW = document.documentElement.clientWidth;
      if (docW >= 810 && docW < 1034) {
        scale = 1.5;
      } else if (docW >= 1034 && docW < 1290) {
        scale = 1.5;
      } else if (docW >= 1290 && docW < 1410) {
        scale = 1.5;
      } else if (docW >= 1410 && docW < 1930) {
        scale = 1.5;
      }
      console.log("scale=" + scale);
      return scale;
    },
  },
};

然后npm run dev 运行一下代码，就可以正常打开pdf文件了，美中不足就是pdf文件过大的话，加载很慢！插件完全没问题，也并没有出现pdf文档字体丢失的问题。

以上就是vue使用pdfjs依赖包的教程，以下为参考文献：