参考链接作者原文展示了PDF,我只需要一部分功能

<template>
  <div class="preview-pdf">
    <h1>PDF页数为{{pdfPages}}</h1>
   
  </div>
</template>
<script>
const PDFJS = require('pdfjs-dist')
PDFJS.GlobalWorkerOptions.workerSrc = 'https://cdn.jsdelivr.net/npm/pdfjs-dist@2.13.216/build/pdf.worker.js'
export default {
  data() {
    return {
      pdfPages: '' // 页数

    }
  },
  mounted() {
    this.getPdfUrl()
  },
  methods: {
    getPdfUrl() {
      // todo 请求后台,获取pdf的url,这里用的是线上的地址
      const url = 'https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf'
      const loadingTask = PDFJS.getDocument(url)
      loadingTask.promise.then(pdf => {
        this.pdfPages = pdf.numPages
      })
    }

  }
}
</script>
<style lang="less" scoped>
.preview-pdf {
  h1 {
    margin: 30px auto;
    text-align: center;
    font-family: '宋体';
    letter-spacing: 2px;
  }
}
</style>

Logo

前往低代码交流专区

更多推荐