vue 实现pdf

在Vue中实现PDF功能

使用vue-pdf库

安装vue-pdf库：

npm install vue-pdf

在Vue组件中使用：

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

<script>
import pdf from 'vue-pdf'

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

使用PDF.js直接集成

安装pdfjs-dist：

npm install pdfjs-dist

实现PDF渲染：

<template>
  <div>
    <canvas ref="pdfCanvas"></canvas>
  </div>
</template>

<script>
import * as pdfjsLib from 'pdfjs-dist'

export default {
  data() {
    return {
      pdfDoc: null,
      pageNum: 1,
      pageRendering: false
    }
  },
  mounted() {
    this.loadPDF('/path/to/document.pdf')
  },
  methods: {
    async loadPDF(url) {
      const loadingTask = pdfjsLib.getDocument(url)
      this.pdfDoc = await loadingTask.promise
      this.renderPage(this.pageNum)
    },
    async renderPage(num) {
      this.pageRendering = true
      const page = await this.pdfDoc.getPage(num)
      const viewport = page.getViewport({ scale: 1.0 })
      const canvas = this.$refs.pdfCanvas
      const context = canvas.getContext('2d')

      canvas.height = viewport.height
      canvas.width = viewport.width

      const renderContext = {
        canvasContext: context,
        viewport: viewport
      }

      await page.render(renderContext).promise
      this.pageRendering = false
    }
  }
}
</script>

实现PDF下载功能

<template>
  <button @click="downloadPDF">下载PDF</button>
</template>

<script>
export default {
  methods: {
    downloadPDF() {
      const link = document.createElement('a')
      link.href = '/path/to/document.pdf'
      link.download = 'document.pdf'
      document.body.appendChild(link)
      link.click()
      document.body.removeChild(link)
    }
  }
}
</script>

使用第三方服务生成PDF

安装html2pdf.js：

npm install html2pdf.js

将HTML内容转换为PDF：

<template>
  <div ref="content">
    <!-- 要转换为PDF的内容 -->
  </div>
  <button @click="generatePDF">生成PDF</button>
</template>

<script>
import html2pdf from 'html2pdf.js'

export default {
  methods: {
    generatePDF() {
      const element = this.$refs.content
      const opt = {
        margin: 1,
        filename: 'document.pdf',
        image: { type: 'jpeg', quality: 0.98 },
        html2canvas: { scale: 2 },
        jsPDF: { unit: 'in', format: 'letter', orientation: 'portrait' }
      }

      html2pdf().from(element).set(opt).save()
    }
  }
}
</script>

实现PDF预览与分页控制

<template>
  <div>
    <pdf :src="pdfSrc" :page="currentPage"></pdf>
    <button @click="prevPage" :disabled="currentPage <= 1">上一页</button>
    <span>第 {{ currentPage }} 页 / 共 {{ pageCount }} 页</span>
    <button @click="nextPage" :disabled="currentPage >= pageCount">下一页</button>
  </div>
</template>

<script>
import pdf from 'vue-pdf'

export default {
  components: { pdf },
  data() {
    return {
      pdfSrc: '/path/to/document.pdf',
      currentPage: 1,
      pageCount: 0
    }
  },
  created() {
    this.getPageCount()
  },
  methods: {
    async getPageCount() {
      const loadingTask = pdf.createLoadingTask(this.pdfSrc)
      const pdf = await loadingTask.promise
      this.pageCount = pdf.numPages
    },
    prevPage() {
      if (this.currentPage > 1) {
        this.currentPage--
      }
    },
    nextPage() {
      if (this.currentPage < this.pageCount) {
        this.currentPage++
      }
    }
  }
}
</script>