vue3.0 预览pdf

要在Vue 3.0中预览PDF，您可以使用PDF.js库。以下是使用PDF.js在Vue 3.0中预览PDF文件的步骤：

1. 安装pdfjs-dist：

npm install pdfjs-dist --save

2. 在Vue组件中，使用`pdfjs-dist`加载PDF文件：

import pdfjsLib from 'pdfjs-dist';

export default {
  name: 'PDFViewer',
  data() {
    return {
      pdf: null,
      currentPage: 1,
      totalPages: 0,
    };
  },
  methods: {
    loadPDF() {
      const loadingTask = pdfjsLib.getDocument(this.src);
      loadingTask.promise.then((pdf) => {
        this.pdf = pdf;
        this.totalPages = pdf.numPages;
        this.loadPage(this.currentPage);
      });
    },
    loadPage(pageNumber) {
      this.pdf.getPage(pageNumber).then((page) => {
        const canvas = this.$refs.canvas;
        const context = canvas.getContext('2d');
        const viewport = page.getViewport({ scale: 1.0 });
        const renderContext = {
          canvasContext: context,
          viewport: viewport,
        };
        page.render(renderContext);
      });
      this.currentPage = pageNumber;
    },
    nextPage() {
      if (this.currentPage < this.totalPages) {
        this.loadPage(this.currentPage + 1);
      }
    },
    prevPage() {
      if (this.currentPage > 1) {
        this.loadPage(this.currentPage - 1);
      }
    },
  },
  mounted() {
    this.loadPDF();
  },
};

3. 在Vue组件的模板中，添加用于呈现PDF的`canvas`元素：

<template>
  <div>
    <canvas ref="canvas"></canvas>
    <div>
      <button @click="prevPage">Previous</button>
      <button @click="nextPage">Next</button>
      <span>Page {{ currentPage }} of {{ totalPages }}</span>
    </div>
  </div>
</template>

4. 在Vue组件的`props`中添加`src`属性，用于指定要加载的PDF文件的URL：

export default {
  name: 'PDFViewer',
  props: {
    src: {
      type: String,
      required: true,
    },
  },
  ...
};

现在，您可以使用`PDFViewer`组件来在Vue 3.0中预览PDF文件：

<template>
  <div>
    <PDFViewer src="http://example.com/myfile.pdf"></PDFViewer>
  </div>
</template>

<script>
import PDFViewer from './PDFViewer.vue';

export default {
  name: 'App',
  components: {
    PDFViewer,
  },
};
</script>