PDF文件预览

下载 pdf.js pdf.worker.js

<template>
  <div
    id="canvas_pdf"
    class="scrollBar"
  ></div>
</template>
<script>
export default {
  name: "viewPdf",
  data() {
    return {};
  },
  mounted() {
    this.createCanvasPDF("http://110.16.77.198:27107/api"+this.$route.query.url );
    //this.createCanvasPDF("http://110.16.77.198:27107/api/admin/sys-file/myfile/22578f00b234430c8acff2460b153c28.pdf");
  },
  methods: {
    createCanvasPDF(url) {
      var loadingTask = pdfjsLib.getDocument(url);
      loadingTask.promise.then((pdf) => {
        // pdf 是文件的信息

        let pageNum = pdf._pdfInfo.numPages;
        pdf.getPage(1).then((page) => {
          // 循环的p为每页的页码
          // page为当前的内容信息
          var scale = 0.3; // 画布显示的大小比例
          var viewport = page.getViewport({ scale: scale });
          var outputScale = window.devicePixelRatio || 1;

          var parent = document.getElementById("canvas_pdf");
          parent.innerHTML = "";
          // if (parent.childNodes && parent.childNodes.length == 1) {
          //   parent.removeChild(parent.childNodes[0]);
          // }
          let H = Math.floor(viewport.height * outputScale) * pageNum;
          //
          let W = parent.offsetWidth;
          // 创建节点canvas
          var canvas = document.createElement("canvas");
          var context = canvas.getContext("2d");
          canvas.height = H;
          canvas.width = W;
          var transform =
            outputScale !== 1 ? [outputScale, 0, 0, outputScale, 0, 0] : null;
          var renderContext = {
            canvasContext: context,
            transform: transform,
            viewport: viewport,
          };
          page.render(renderContext);
          parent.appendChild(canvas);
        });
      });
    },
  },
};
</script>