vue中使用Vue-pdf在线预览

本文主要是介绍vue中使用Vue-pdf在线预览，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

下载

npm i vue-pdf

引入(在所需要预览的页面)

<script>

import axios from 'axios'

import pdf from 'vue-pdf'

import CMapReaderFactory from 'vue-pdf/src/CMapReaderFactory.js' // 加载中文的包

export default {

  components: {

    pdf

  },

  data () {

    return {

      numPages:''，

       url:''，

       src:''，

       path:'',//pdf的地址，例如：/testFile.pdf

    }

  },

  created(){

    this.url = axios.defaults.baseURL; // 项目当前的域名

    this.src = pdf.createLoadingTask({

      // url:'http://localhost:8080'+this.path,// 此行是为了在本地跑项目的时候能够加载出来，仅用于开发显示

      url:this.url+this.path,//正式环境用这个！

      CMapReaderFactory

    })

    // 让所有页数一次性加载完，否则就只会加载第一页

    this.src.then(pdf => {

      this.numPages = pdf.numPages

      }).catch(() => {

    })

  },

}

</script>

this.url一定要是当前项目的域名，否则会报跨域，请确保this.url+this.path是能够在浏览器访问的

例如：http://test.com/testFile.pdf

html部分

<template>

    <div class="scrollBox">

      <div v-for="i in numPages" :key="i">

        <pdf :src="src" :page="i"></pdf>

      </div>

    </div>

  </div>

</template>

若只写<pdf :src="src"></pdf>，仅加载第一页

这篇关于vue中使用Vue-pdf在线预览的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！