如何在vue中使用pdfjs预览pdf文件

下面是“如何在Vue中使用pdf.js预览pdf文件”的完整攻略。

安装pdf.js

首先，我们需要安装pdf.js。可以通过以下命令来安装：

npm install pdfjs-dist

使用pdf.js渲染pdf文件

1. 在Vue组件中引入pdf.js和样式文件：

import pdfjsLib from 'pdfjs-dist';
import 'pdfjs-dist/web/pdf_viewer.css';

1. 创建一个用于渲染pdf文件的Vue组件：

<template>
  <div ref="pdfWrapper" class="pdf-wrapper"></div>
</template>

<script>
export default {
  data() {
    return {
      pdfDoc: null,
      pdfViewer: null,
      pdfCanvas: null
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    async init() {
      const pdfUrl = '/docs/sample.pdf'

      const loadingTask = pdfjsLib.getDocument(pdfUrl)
      const pdfDoc = await loadingTask.promise

      this.pdfDoc = pdfDoc

      const container = this.$refs.pdfWrapper

      this.pdfViewer = new pdfjsLib.PDFViewer({
        container,
        viewer: container
      })

      this.pdfViewer.setDocument(pdfDoc)

      this.pdfViewer.update()

      this.pdfCanvas = container.querySelector('.pdfViewer canvas')

      this.updateCanvasSize()

      this.addResizeListener()
    },
    updateCanvasSize() {
        const { scale } = this.pdfViewer
        const canvas = this.pdfCanvas
        const wrapper = this.$refs.pdfWrapper
        canvas.style.width = (wrapper.offsetWidth * scale) + 'px'

        const { height } = canvas.getBoundingClientRect()
        wrapper.style.height = height + 'px'
    },
    addResizeListener() {
        window.addEventListener('resize', this.onResize);
    },
    removeResizeListener() {
        window.removeEventListener('resize', this.onResize);
    },
    onResize() {
        this.updateCanvasSize();
    },
  },
  beforeDestroy() {
    this.removeResizeListener();
  }
}
</script>

<style scoped>
.pdf-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
}
</style>

该组件会在挂载时加载指定的pdf文件，并将其渲染在一个div中。

另一种预览PDF文件的方法

另一种预览PDF文件的方法是在Vue中使用vue-pdf组件。vue-pdf是一个基于pdf.js的Vue组件，可以轻松地将PDF文件渲染到应用程序中。

1. 安装依赖：

npm install vue-pdf

1. 在Vue组件中引入vue-pdf：

import VuePdf from 'vue-pdf';

1. 创建一个用于渲染pdf文件的Vue组件：

<template>
  <div class="pdf-wrapper">
    <vue-pdf :src="pdfSrc" />
  </div>
</template>

<script>
import VuePdf from 'vue-pdf';

export default {
  components: {
    VuePdf,
  },
  data() {
    return {
      pdfSrc: '/docs/sample.pdf'
    }
  }
}
</script>

<style scoped>
.pdf-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
}
</style>

该组件将采用pdfSrc的值作为PDF文件的URL，渲染PDF文件。

以上两种方法都可以用于在Vue中预览PDF文件。如果需要实现更多自定义功能，建议使用第一种方法。