Front-end preview PDF

Implement preview PDF based on version 2.0.489

npm install [email protected]

The corresponding dependencies and data flows are introduced first

<script>
  import PDFJS from "pdfjs-dist";
  import { baseData } from "./base64Data"; // If you are using remote PDF files directly, you will get cross-domain data flow. You can have the backend converted to a Base64 data stream return
</script>
Copy the code

Create canvas canvas, one canvas for each PDF page.

  <template>
  	<div>
      <canvas :id="'canvasPdf'+page" v-for="page in count" :key="page"></canvas>
    </div>
  </template>
Copy the code

	methods: {
    // page initialization method
      init() {
      	const _this = this;
      	let pdfBase64Data = atob(baseData); // Decodes the Base64 encoding string
      	PDFJS.getDocument({ data: pdfBase64Data }).then(res= > {
        _this.pdfDoc = res;
        _this.count = res.numPages; / / the number of pages of the PDF
        _this.$nextTick(() = > {
          _this.renderPage(1);
        });
       });
      },
      renderPage(num) {
      	const _this = this;
        _this.pdfDoc.getPage(num).then((page) = > {
          // Get the canvas ID
          let canvas = document.getElementById("canvasPdf" + num);
          let ctx = canvas.getContext("2d");
          let dpr = window.devicePixelRatio || 1;
          let bsr =
            ctx.webkitBackingStorePixelRatio ||
            ctx.mozBackingStorePixelRatio ||
            ctx.msBackingStorePixelRatio ||
            ctx.oBackingStorePixelRatio ||
            ctx.backingStorePixelRatio ||
            1;
          let ratio = dpr / bsr;
          let scale = _this.pdfWidth / page.getViewport(1).width;
          let viewport = page.getViewport(scale);
          canvas.width = viewport.width * ratio;
          canvas.height = viewport.height * ratio;
          canvas.style.width = viewport.width + "px";
          canvas.style.height = viewport.height + "px";
          ctx.setTransform(ratio, 0.0, ratio, 0.0);
          let renderContext = {
            canvasContext: ctx,
            viewport: viewport,
          };
          page.render(renderContext);
          If the number of pages in the PDF is smaller than the number of incoming pages, jump out of the recursion
          if (_this.count > num) {
            setTimeout(() = > {
              _this.renderPage(num + 1);
            }, 500); }}); }}Copy the code

The full code supports some functionality, with the following parameters. Pointing fingers at the big guy

attribute

The event

Copy the code