vue-pdf实现在线预览

项目当中附件预览，相信大家都会遇到，下面分享一个 PDF 预览组件，可直接使用

• 安装插件

npm install --save vue-pdf

<el-dialog
  title="附件预览"
  :visible.sync="previewPdf"
  width="60%"
  top="5vh"
  append-to-body
>
  <pdf ref="pdf" v-for="i in numPages" :key="i" :src="url" :page="i"> </pdf>
</el-dialog>

<script>
import pdf from 'vue-pdf'
export default {
  components:{
      pdf
  },
  data(){
      return {
          previewPdf: false,
          url: "http://192.168.2.222/test.pdf",
          numPages: null,
      }
  },
  methods: {
    getNumPages() {
      let loadingTask = pdf.createLoadingTask(this.url);
      loadingTask.promise
        .then((pdf) => {
          this.numPages = pdf.numPages;
        })
        .catch((err) => {
          console.error("pdf 加载失败", err);
        });
    },
  }
</script>