npm install pdfjs-dist@2.16.105 、vue2 、vue-cli
pdfjs-dist2是js文件，还可以规避高版本浏览器不适配问题

 <div class="hxt-content" id="hxt-content"></div>

import * as pdfjsLib from "pdfjs-dist/legacy/build/pdf.js";
import pdfjsWorker from "pdfjs-dist/legacy/build/pdf.worker.entry.js";

 this.$nextTick(async () => {
      //可以是blob格式，也可以是http文件路径
      const response = await downloadFile(this.url);
      const pdfBlob = await new Blob([response], { type: "application/pdf" });
      const pdfUrlObject = await URL.createObjectURL(pdfBlob);
      // console.log("pdfUrl", pdfBlob, pdfUrlObject);
      // const iframe = document.getElementById("iframe");
      // iframe.src = pdfUrlObject;
      // iframe.onload = () => {
      //   URL.revokeObjectURL(iframe.src);
      // };
      pdfjsLib.GlobalWorkerOptions.workerSrc = pdfjsWorker;
      // 加载 PDF 文件
      pdfjsLib.getDocument(pdfUrlObject).promise.then((pdf) => {
        pdf.getPage(1).then((page) => {
          const canvas = document.createElement("canvas");
          var container = document.getElementById("hxt-content");
          container.appendChild(canvas);
          const context = canvas.getContext("2d");
          const viewport = page.getViewport({ scale: 0.75 }); //设置网页在canvas中的缩放
          const pageWidth = page._pageInfo.view[2],
            pageHeight = page._pageInfo.view[3];
          // canvas.height = viewport.height;
          // canvas.width = viewport.width;
          canvas.height = container.offsetHeight - 20; //避免顶格显示
          canvas.width = (canvas.height / pageHeight) * pageWidth + 50; 

          const renderContext = {
            canvasContext: context,
            viewport: viewport,
          };
          console.log(page, renderContext);
          page.render(renderContext);
        });
      });

import * as pdfjsLib from "pdfjs-dist/legacy/build/pdf.js";
import pdfjsWorker from "pdfjs-dist/legacy/build/pdf.worker.entry.js";
// ---------图片显示
 this.$nextTick(async () => {
      //可以是blob格式，也可以是http文件路径
      const response = await downloadFile(this.url);
      const pdfBlob = await new Blob([response], { type: "application/pdf" });
      const pdfUrlObject = await URL.createObjectURL(pdfBlob);
      pdfjsLib.GlobalWorkerOptions.workerSrc = pdfjsWorker;
      // 加载 PDF 文件
      pdfjsLib.getDocument(pdfUrlObject).promise.then((pdf) => {
        pdf.getPage(1).then((page) => {
          const canvas = document.createElement("canvas");
          const context = canvas.getContext("2d");
          const _multiple = 3; // 倍数，防止canvas转图片放大失真
          const viewport = page.getViewport({ scale: _multiple  }); // 页面等比放大
          const pageWidth = page._pageInfo.view[2],
                pageHeight = page._pageInfo.view[3]; // pdf页面大小
          canvas.height = pageHeight * _multiple ;
          canvas.width = pageWidth * _multiple ;

          const renderContext = {
            canvasContext: context,
            viewport: viewport
          };
          const renderTask = await page.render(renderContext);
          renderTask.promise.then(async () => {
            this.imgUrl = await canvas.toDataURL("image/png"); //canvas->image
            console.log(this.imgUrl);
          });
        });
      });