PDF.js实现PDf的预览

这里因为封装的原因将之前的代码改动了，但是封装到一半我忙别的去了这个就被落下了，等我什么有时间在改回来吧，这里先记录一下

<template>
  <mu-dialog
    :open.sync="pdfjsView"
    title=""
    width="100%"
    weight="100%"
    class="cpdf"
    append-to-body
    :fullscreen="fullscreen"
    :esc-press-close="false"
    :overlay-close="false"
    :lock-scroll="true"
  >
    <div v-if="pdfurl" class="center" style="height: 550px">
      <canvas
        v-for="data in canvasData"
        :key="data"
        :id="'the-canvas-' + data"
        class="canvasstyle"
      ></canvas>
    </div>
    <div v-else style="font-size: 18px; text-align: center; font-weight: 900">
      没有PDF文件可以预览
    </div>
    <div class="close-box" @click="closePDF" :style="closeStyle">×</div>
    <slot name="footer"> </slot>
  </mu-dialog>
</template>

<script>
import PDFJS from "pdfjs-dist";
export default {
  name: "previewPDF",
  props: {
    pdfjsView: {
      type: Boolean,
      default: false,
    },
    source: {
      require: true,
    },
    // 是否全屏
    fullscreen: {
      type: Boolean,
      default: false,
    },
    // 关闭按钮样式
    closeStyle: {
      default() {
        return {};
      },
    },
  },
  data() {
    return {
      pdfDoc: null, // pdfjs 生成的对象
      pageNum: 1, //
      pageRendering: false,
      pageNumPending: null,
      scale: 1.2, // 放大倍数
      page_num: 0, // 当前页数
      page_count: 0, // 总页数
      maxscale: 2, // 最大放大倍数
      minscale: 0.8, // 最小放大倍数
      canvasData: [],
      pdfurl: "", //实际使用的资源值
    };
  },
  methods: {
    // renderPage(num) {
    //   // 渲染pdf
    //   const vm = this;
    //   this.pageRendering = true;
    //   const canvas = document.getElementById(`the-canvas-${num}`); // Using promise to fetch the page
    //   try {
    //     this.pdfDoc.getPage(num).then((page) => {
    //       // const viewport = page.getViewport(vm.scale); // alert(vm.canvas.height)
    //       const viewport = page.getViewport({ scale: vm.scale }); // alert(vm.canvas.height)
    //       canvas.height = viewport.height;
    //       canvas.width = viewport.width; // Render PDF page into canvas context

    //       const renderContext = {
    //         //   canvasContext: vm.ctx,
    //         canvasContext: canvas.getContext("2d"),
    //         viewport,
    //       };
    //       const renderTask = page.render(renderContext); // Wait for rendering to finish
    //       try {
    //         renderTask.promise.then(() => {
    //           vm.pageRendering = false;
    //           if (vm.pageNumPending !== null) {
    //             // New page rendering is pending
    //             vm.renderPage(vm.pageNumPending);
    //             vm.pageNumPending = null;
    //           }
    //         });
    //       } catch (error) {
    //         window.alert(error);
    //       }
    //     });
    //   } catch (error) {
    //     window.alert(error);
    //   }
    //   vm.page_num = vm.pageNum;
    // },

    // showPDf() {
    //   const vm = this;

    //   vm.canvasData = []; // PDFJS.workerSrc = '../../../static/PDF/pdf.worker.min.js'
    //   PDFJS.getDocument(vm.pdfurl)
    //     .promise.then((pdfDoc_) => {
    //       // 初始化pdf
    //       vm.pdfDoc = pdfDoc_;
    //       vm.page_count = vm.pdfDoc.numPages;
    //       for (let i = 0; i < vm.page_count; i += 1) {
    //         vm.canvasData.push(i + 1);
    //       }
    //       return pdfDoc_;
    //     })
    //     .then((pdfDoc_) => {
    //       // 初始化pdf
    //       vm.pdfDoc = pdfDoc_;
    //       vm.page_count = vm.pdfDoc.numPages;
    //       for (let i = 0; i < vm.page_count; i += 1) {
    //         vm.renderPage(i + 1);
    //       }
    //     });
    // },
    renderPage(num) {
      // 渲染pdf
      const vm = this;
      this.pageRendering = true;
      const canvas = document.getElementById(`the-canvas-${num}`); // Using promise to fetch the page
      this.pdfDoc
        .getPage(num)
        .then(
          (page) => {
            const viewport = page.getViewport({ scale: vm.scale }); // alert(vm.canvas.height)
            console.log(page.getViewport);
            canvas.height = viewport.height;
            canvas.width = viewport.width; // Render PDF page into canvas context
            const renderContext = {
              //   canvasContext: vm.ctx,
              canvasContext: canvas.getContext("2d"),
              viewport,
            };
            const renderTask = page.render(renderContext); // Wait for rendering to finish

            renderTask.promise
              .then(
                () => {
                  vm.pageRendering = false;
                  if (vm.pageNumPending !== null) {
                    // New page rendering is pending
                    vm.renderPage(vm.pageNumPending);
                    vm.pageNumPending = null;
                  }
                },
                (error) => {
                  console.log(error);
                }
              )
              .catch((e) => {
                console.log(e);
              });
          },
          (error) => {
            console.log(error);
          }
        )
        .catch((e) => {
          console.log(e);
        });

      vm.page_num = vm.pageNum;
    },

    showPDf() {
      const vm = this;
      try {
        vm.canvasData = []; // PDFJS.workerSrc = '../../../static/PDF/pdf.worker.min.js'
        PDFJS.getDocument(vm.pdfurl)
          .promise.then(
            (pdfDoc_) => {
              // 初始化pdf
              vm.pdfDoc = pdfDoc_;
              vm.page_count = vm.pdfDoc.numPages;
              for (let i = 0; i < vm.page_count; i += 1) {
                vm.canvasData.push(i + 1);
              }
              return pdfDoc_;
            },
            (e) => {
              console.log(e);
            }
          )
          .then(
            (pdfDoc_) => {
              // 初始化pdf
              vm.pdfDoc = pdfDoc_;
              vm.page_count = vm.pdfDoc.numPages;
              for (let i = 0; i < vm.page_count; i += 1) {
                vm.renderPage(i + 1);
              }
            },
            (e) => {
              console.log(e);
            }
          )
          .catch((e) => {
            console.log(e);
          });
      } catch (error) {
        console.log(error);
      }
    },
    closePDF(reason) {
      console.log(reason);
      this.$emit("update:pdfjsView", false);
    },
    // 将获取到的资源转换成Src的形式
    sourceToSrc() {
      let source = this.source;
      // 如果是blob类型
      if (Object.prototype.toString.call(source) == "[object Blob]") {
        console.log();
        this.pdfurl = URL.createObjectURL(source);
      }
      // 如果是file类型
      if (Object.prototype.toString.call(source) == "[object File]") {
        console.log();
        this.pdfurl = URL.createObjectURL(source);
      }
      // 如果是字符串
      if (typeof source === "string") {
        // let urlReg =
        //   "/^https?://(([a-zA-Z0-9_-])+(.)?)*(:d+)?(/((.)?(?)?=?&?[a-zA-Z0-9_-](?)?)*)*$/";
        let urlReg =
          /^https?:\/\/(([a-zA-Z0-9_-])+(\.)?)*(:\d+)?(\/((\.)?(\?)?=?&?[a-zA-Z0-9_-](\?)?)*)*$/i;
        let urlHead = source.slice(0, 5);
        let tempURLStr = urlHead == "blob:" ? source.slice(5) : source; //src待判字符串
        let tempBase64Info = source.split(","); //分割base64字符串
        let tempBaseStr =
          tempBase64Info.length == 1 ? tempBase64Info[0] : tempBase64Info[1]; //得到base64内容字符串
        // 如果是src
        if (urlReg.test(tempURLStr)) {
        } else if (btoa(atob(tempBaseStr)) == tempBaseStr) {
          // 如果是base64
          if (tempBase64Info[0] == "data:application/pdf;base64") {
            // 如果是PDF类型的Base64
            let arr = source.split(",");
            let mime = arr[0].match(/:(.*?);/)[1];
            let bstr = atob(arr[1]);
            let n = bstr.length;
            let u8arr = new Uint8Array(n);
            while (n--) {
              u8arr[n] = bstr.charCodeAt(n);
            }
            let result = new Blob([u8arr], { type: mime });
            // let resultBlob = this.dataURLtoBlob(source);
            this.pdfurl = URL.createObjectURL(result);
          } else {
            // 如果是其他文件类型
            throw new Error("请选择PDF文件");
          }
        } else {
          // 如果是普通字符串
          throw new Error("当前传入值为字符串，请传入正确的数据格式");
        }
      }
    },
    // base64转blob
    dataURLtoBlob(dataurl) {
      let arr = dataurl.split(",");
      let mime = arr[0].match(/:(.*?);/)[1];
      console.log(mime);
      console.log(arr);
      let bstr = atob(arr[1]);
      let n = bstr.length;
      let u8arr = new Uint8Array(n);
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
      }
      return new Blob([u8arr], { type: mime });
    },
  },
  mounted() {
    this.sourceToSrc();
    this.showPDf();
  },
};
</script>

<style lang="scss" scoped type="text/css">
.cpdf {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 99999;
  display: flex;
  justify-content: center;
  align-items: center;
  ::v-deep .mu-dialog-body {
    position: relative;
    padding: 24px 20px 20px;
    .center {
      text-align: center;
      height: 100%;
      overflow: auto;
      padding-top: 20px;
      border: 1px solid gray;
      .contor {
        margin-bottom: 10px;
      }
    }
    .close-box {
      position: absolute;
      right: 1%;
      top: 0;
      font-size: 20px;
      cursor: pointer;
    }
  }
  .page-foot {
    position: fixed;
    left: 0px;
    bottom: 0px;
    width: 100%;
    height: 56px;
    line-height: 56px;
    background-color: #fff;
    text-align: center;
    z-index: 10;
    .foot-button {
      display: inline-block;
      height: 56px;
      position: relative;
      top: -22px;
      left: 20px;
    }
  }
}
</style>