pdfjs-dist预览pdf文件

vue项目中使用pdfjs-dist预览pdf文件+分页并兼容字体
1.安装
npm install pdfjs-dist --save
2.引入
let PDFJS = require(“pdfjs-dist”);
PDFJS.GlobalWorkerOptions.workerSrc = require(“pdfjs-dist/build/pdf.worker.min”);

3

<div class="center">
      <div class="contor">
        <van-button
          plain
          hairline
          color="#c9431f"
          type="primary"
          size="mini"
          style="cursor:pointer"
          @click="prev"
        >上一页</van-button>
        <span>
          <span v-text="page_num" /> /
          <span v-text="page_count" />
        </span>
        <van-button
          plain
          hairline
          color="#c9431f"
          type="primary"
          size="mini"
          style="cursor:pointer"
          @click="next"
        >下一页</van-button>
        <van-button
          plain
          hairline
          color="#c9431f"
          type="primary"
          size="mini"
          style="cursor:pointer"
          @click="addscale"
        >放大</van-button>
        <van-button
          plain
          hairline
          color="#c9431f"
          type="primary"
          size="mini"
          style="cursor:pointer"
          @click="minus"
        >缩小</van-button>
      </div>
      <canvas id="the-canvas" class="canvasstyle" />
    </div>

data() {
    return {
      pdfUrl: "",
      pdfDoc: null, // pdfjs 生成的对象
      pageNum: 1, //
      pageRendering: false,
      pageNumPending: null,
      scale: 1.7, // 放大倍数
      page_num: 0, // 当前页数
      page_count: 0, // 总页数
      maxscale: 2.2, // 最大放大倍数
      minscale: 1.2 // 最小放大倍数
    };
  },
  computed: {
    ctx() {
      const id = document.getElementById("the-canvas");
      return id.getContext("2d");
    }
  },

  methods: {
    onClickLeft() {
      window.history.go(-1);
    },
    init(pdfUrl) {
      let _this = this;
      // 初始化pdf
      PDFJS.getDocument(pdfUrl).then(function(pdfDoc_) {
        _this.pdfDoc = pdfDoc_;
        _this.page_count = _this.pdfDoc.numPages;
        _this.renderPage(_this.pageNum);
      });
    },
    renderPage(num) {
      // 渲染pdf
      const vm = this;
      this.pageRendering = true;
      const canvas = document.getElementById("the-canvas");
      // Using promise to fetch the page
      this.pdfDoc.getPage(num).then(function(page) {
        var viewport = page.getViewport(vm.scale);
        // alert(vm.canvas.height)
        canvas.height = viewport.height;
        vm.pdfWidth = canvas.width = viewport.width;
        // Render PDF page into canvas context
        var renderContext = {
          canvasContext: vm.ctx,
          viewport: viewport
        };
        var renderTask = page.render(renderContext);
        // Wait for rendering to finish
        renderTask.promise.then(function() {
          vm.pageRendering = false;
          if (vm.pageNumPending !== null) {
            // New page rendering is pending
            vm.renderPage(vm.pageNumPending);
            vm.pageNumPending = null;
          }
        });
      });
      vm.page_num = vm.pageNum;
    },
    addscale() {
      // 放大
      if (this.scale >= this.maxscale) {
        return;
      }
      this.scale += 0.5;
      this.queueRenderPage(this.pageNum);
    },
    minus() {
      // 缩小
      if (this.scale <= this.minscale) {
        return;
      }
      this.scale -= 0.5;
      this.queueRenderPage(this.pageNum);
    },
    prev() {
      // 上一页
      const vm = this;
      if (vm.pageNum <= 1) {
        return;
      }
      vm.pageNum--;
      vm.queueRenderPage(vm.pageNum);
    },
    next() {
      // 下一页
      const vm = this;
      if (vm.pageNum >= vm.page_count) {
        return;
      }
      vm.pageNum++;
      vm.queueRenderPage(vm.pageNum);
    },
    queueRenderPage(num) {
      if (this.pageRendering) {
        this.pageNumPending = num;
      } else {
        this.renderPage(num);
      }
    }
  },
  mounted() {
  //解决字体问题
    const CMAP_URL = "https://cdn.jsdelivr.net/npm/pdfjs-dist@2.0.943/cmaps/";
    let obj = {};
    obj.url = this.$route.query.agreementPdfUrl;  //pdf文件地址，根据情景自行修改
    obj.cMapUrl = CMAP_URL;
    obj.cMapPacked = true;
    this.init(obj);
  }
参考：
https://blog.csdn.net/qq_38057434/article/details/104654073?utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7Eessearch%7Evector-14.no_search_link&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7Eessearch%7Evector-14.no_search_link

react在项目中使用

import React, { useEffect, useState, useRef } from 'react'
import pdfFile from './sample.pdf';
import { Button } from 'antd';
import './index.css';
import * as PDFJS from "pdfjs-dist";
import pdfjsWorker from 'pdfjs-dist/build/pdf.worker.entry';
PDFJS.GlobalWorkerOptions.workerSrc = pdfjsWorker;

export default function Pdf({ binaryString }) {
    // 把当前文件以buffer的形式请求回来可以使用
    let pdfDoc = useRef({});
    const pageRendering = useRef(false);
    const pageNumPending = useRef(null);
    const [scale, setScale] = useState(1.5);
    const [currentPage, setCurrentPage] = useState(1);
    const [allPageNumber, setAllPageNumber] = useState();
    function renderPage(num, changeScale) {
        const canvas = document.querySelector("#the-canvas");
        const ctx = canvas.getContext('2d');
        pageRendering.current = true;
        pdfDoc.current.getPage(num).then(function (page) {
            var viewport = page.getViewport({
                scale: changeScale || scale,
            });
            // Support HiDPI-screens.
            var outputScale = window.devicePixelRatio || 1;

            canvas.width = Math.floor(viewport.width * outputScale);
            canvas.height = Math.floor(viewport.height * outputScale);
            canvas.style.width = Math.floor(viewport.width) + "px";
            canvas.style.height = Math.floor(viewport.height) + "px";

            var transform = outputScale !== 1 ?
                [outputScale, 0, 0, outputScale, 0, 0] :
                null;

            // Render PDF page into canvas context
            var renderContext = {
                canvasContext: ctx,
                transform: transform,
                viewport: viewport,
            };
            var renderTask = page.render(renderContext);

            // Wait for rendering to finish
            renderTask.promise.then(function () {
                pageRendering.current = false;
                if (pageNumPending.current !== null) {
                    // New page rendering is pending
                    renderPage(pageNumPending.current);
                    pageNumPending.current = null;
                }
            });
        });
    };

    const initPDF = async () => {
        const loadingTask = PDFJS.getDocument(binaryString);
        loadingTask.promise.then(function (pdfDoc_) {
            pdfDoc.current = pdfDoc_;
            setAllPageNumber(pdfDoc_.numPages); // pdfDoc_.numPages表示总页数
            renderPage(currentPage);
        });
    }

    useEffect(() => {
        if (binaryString) {
            initPDF();
        }
    }, [binaryString]);

    const magnify = () => {
        setScale(scale + 0.1);
        renderPage(currentPage, scale + 0.1)
    };

    const lessen = () => {
        if (scale <= 1) return;
        setScale(scale - 0.1);
        renderPage(currentPage, scale - 0.1);
    };

    const prePage = () => {
        if (currentPage > 1) {
            const upPage = currentPage - 1;
            renderPage(upPage);
            setCurrentPage(upPage);
        }
    };

    const nextPage = () => {
        if (currentPage < allPageNumber) {
            const donPage = currentPage + 1;
            renderPage(donPage);
            setCurrentPage(donPage);
        }
    };

    return (
        <div className='Pdf'>
            <div>
                <canvas id='the-canvas'></canvas>
            </div>
            <div className='ButtonList'>
                <Button className='rightMargin'>当前页数{currentPage}</Button>
                <Button className='rightMargin' id='page_num'>总页数{allPageNumber}</Button>
                <Button className='rightMargin' onClick={magnify}>放大</Button>
                <Button className='rightMargin' onClick={lessen}>缩小</Button>
                <Button className='rightMargin' onClick={prePage}>上一页</Button>
                <Button className='rightMargin' onClick={nextPage}>下一页</Button>
            </div>
        </div>
    )
}