vue 实现pdf查看

使用 vue-pdf 库实现 PDF 查看

安装 vue-pdf 库

npm install vue-pdf

引入并使用组件

<template>
  <pdf :src="pdfUrl"></pdf>
</template>

<script>
import pdf from 'vue-pdf'

export default {
  components: { pdf },
  data() {
    return {
      pdfUrl: '/path/to/document.pdf'
    }
  }
}
</script>

使用 PDF.js 实现高级功能

安装 pdfjs-dist

npm install pdfjs-dist

实现多页渲染

<template>
  <div v-for="page in numPages" :key="page">
    <pdf :src="pdfUrl" :page="page"></pdf>
  </div>
</template>

<script>
import pdf from 'vue-pdf'

export default {
  components: { pdf },
  data() {
    return {
      pdfUrl: '/path/to/document.pdf',
      numPages: 0
    }
  },
  mounted() {
    const loadingTask = pdf.createLoadingTask(this.pdfUrl)
    loadingTask.promise.then(pdf => {
      this.numPages = pdf.numPages
    })
  }
}
</script>

添加 PDF 查看器控件

实现缩放和导航功能

<template>
  <div>
    <button @click="scale += 0.25">放大</button>
    <button @click="scale -= 0.25">缩小</button>
    <button @click="page > 1 ? page-- : null">上一页</button>
    <span>{{ page }} / {{ numPages }}</span>
    <button @click="page < numPages ? page++ : null">下一页</button>

    <pdf 
      :src="pdfUrl" 
      :page="page" 
      :scale="scale"
      @num-pages="numPages = $event"
    ></pdf>
  </div>
</template>

<script>
import pdf from 'vue-pdf'

export default {
  components: { pdf },
  data() {
    return {
      pdfUrl: '/path/to/document.pdf',
      page: 1,
      numPages: 0,
      scale: 1.0
    }
  }
}
</script>

处理 PDF 加载错误

添加错误处理

<template>
  <div>
    <pdf 
      :src="pdfUrl" 
      @error="handleError"
    ></pdf>
    <p v-if="error">{{ error }}</p>
  </div>
</template>

<script>
import pdf from 'vue-pdf'

export default {
  components: { pdf },
  data() {
    return {
      pdfUrl: '/path/to/document.pdf',
      error: null
    }
  },
  methods: {
    handleError(err) {
      this.error = '加载PDF失败: ' + err
    }
  }
}
</script>

实现 PDF 下载功能

添加下载按钮

<template>
  <div>
    <pdf :src="pdfUrl"></pdf>
    <button @click="downloadPdf">下载PDF</button>
  </div>
</template>

<script>
import pdf from 'vue-pdf'

export default {
  components: { pdf },
  data() {
    return {
      pdfUrl: '/path/to/document.pdf'
    }
  },
  methods: {
    downloadPdf() {
      const link = document.createElement('a')
      link.href = this.pdfUrl
      link.download = 'document.pdf'
      link.click()
    }
  }
}
</script>